:root {
      --ElementCellWidth: 400px;
      --ElementCellScale: 1.0;
      --ThumbnailWidth: 1.0;
      --PopUpWindowWidth: 70vw;
      --ExpandedDataElementWidth: 70vw;
      --ExpandedDataNumOfCols: 2;
      --SearchEntryWidth: 35vw;
      --ComposerPaperWidth: 8.5;
      --ComposerPaperLength: 11.0;
      --TimelineBackgroundFade: .875;
      --BorderRadiusFraction: 0.75;
      --LineClamp:  4;
      --vh: 1vh;

      --TopRibbonHeight: 6vh;
      --TimeLineMarkerHeight: 2vh;
      --PlaceMarkersHeight: 2vh;
      --NavigationHeight: 4vh;
      --UtilitiesHeight: 4vh;
      --PDFComposeControlRibbonHeight: 5vh;
      --PDFComposeControlRibbonFontSize: 0vh;

      --SliderThumbColor: rgb(9, 182, 254);
      --SliderThumbWidth: '25px';
      --SliderThumbHeight: '25px';
      --NavigationSliderWidth: 100px;
      --TimeLineElementBookmarkedBackground: rgb(10, 10, 10);
      --BackgroundType: Image;
      --BackgroundColor: rgb(75, 75, 75);
      --TimeElementBackgroundTransparency: 0.750;
      --TimeElementBackgroundColor: rgb(255,255,255); 
      --FullDataBackgroundColor: rgb(115,115,115, 1);
      --ColorScheme: 1;
      --SummaryTextColor: rgb(255, 255, 255);
      --CircleProgressColor: rgb(255, 255, 255);
      
      /* progress circle*/
      --StrokeLength: 0;
      --TotalStrokeLength: 0;

      /* colors */
      --BookPageantOrange: rgb(254, 61, 9);
      --Black: rgb(0, 0, 0);
      --White: rgb(255, 255, 255);
      --InputBoxChangedColor: rgb(129, 217, 255);
      /* --Font: "Bookman Old Style"; */
      --Font: "Arial";
      /* --AlertColor: rgb(0,255,0); */
      --TextColor: white;
      --DarkTextColor: rgb(10, 10, 10);
      --EmeraldGreen: rgb(0, 255, 255);
      --ruby: rgb(255, 0, 0)
      ;
      
      --AlertColor: rgb(9, 182, 254);
      --AlertColorDark: rgb(1, 91, 129);
      --AlertColorPale: rgb(163, 228, 255);
      --Gray0: rgb(255, 255, 255);
      --Gray5: rgb(235, 235, 235);
      --Gray10: rgb(211, 211, 211);
      --Gray15: rgb(175, 175, 175);
      --Gray20: rgb(139, 139, 139);
      --Gray30: rgb(110, 110, 100);
      --Gray40: rgb(80, 80, 80);
      --Gray50: rgb(39, 39, 39);
      --Gray60: rgb(10, 10, 10);
      --HueRotate: 0deg;
      --Brightness: 100%;

      /* color green  */
      /* --AlertColor: rgb(255, 169, 169);
      --AlertColorDark: rgb(92, 62, 62);
      --AlertColorPale: rgb(248, 228, 228);
      --Gray0: #CCA43B  ;
      --Gray10: #DB7C26;
      --Gray15: #F7B538;
      --Gray20: #AFA060;
      --Gray30: #AD8350;
      --Gray40: #764134;
      --Gray50: #2A1A1F;
      --Gray60: #000000; */

      /* color russet  */
      /* --AlertColor: rgb(255, 255, 0);
      --AlertColorDark: rgb(150, 150, 0);
      --AlertColorPale: rgba(200, 200, 0, 0.459);
      --Gray0: rgb(255, 198, 144);
      --Gray10: rgb(211, 169, 123);
      --Gray15: rgb(175, 140, 3.3);
      --Gray20: rgb(139, 111, 102);
      --Gray30: rgb(110, 89, 82);
      --Gray40: rgb(80, 64, 59);
      --Gray50: rgb(39, 28, 25);
      --Gray60: rgb(10, 7.2, 6.4); */

      /* color sky  */
      /* --AlertColor: rgb(247, 215, 112);
      --AlertColorDark: rgb(126, 109, 55);
      --AlertColorPale: rgb(247, 237, 206);
      --Gray0: rgb(150, 223, 252);
      --Gray10: rgb(124, 184, 208);
      --Gray15: rgb(102, 153, 172);
      --Gray20: rgb(81, 121, 137);
      --Gray30: rgb(64, 96, 108);
      --Gray40: rgb(47, 69, 79);
      --Gray50: rgb(23, 34, 35);
      --Gray60: rgb(6, 8.7, 10); */

      /* --AlertColor: rgba(245, 143, 41, 1);
      --AlertColorDark: rgb(117, 67, 18);
      --AlertColorPale: rgb(245, 203, 161);
      --Gray0 : rgba(245, 143, 41, 1);
      --Gray10:rgba(125, 70, 0, 1);
      --Gray15:rgba(164, 176, 245, 1);
      --Gray20:rgba(68, 100, 173, 1);
      --Gray30:rgba(70, 105, 149, 1);
      --Gray40:rgba(87, 119, 159, 1);
      --Gray50:rgba(102, 131, 168, 1);
      --Gray60:rgba(116, 142, 176, 1); */

      /* --AlertColor: rgb(173, 95, 99);
      --AlertColorDark: rgba(45, 8, 10, 1);
      --AlertColorPale: rgba(45, 8, 10, 1);
      --Gray0 : rgba(235, 207, 178, 1);
      --Gray10: rgba(255, 205, 188, 1);
      --Gray15: rgba(213, 172, 169, 1);
      --Gray20: rgba(179, 141, 151, 1);
      --Gray30: rgba(245, 133, 63, 1);
      --Gray40: rgba(124, 54, 38, 1);
      --Gray50: rgba(45, 8, 10, 1);
      --Gray60: rgba(19, 3, 3, 1); */
  
      /* --AlertColor:  rgba(45, 8, 10, 1);
      --AlertColorDark: rgb(94, 73, 50);
      --AlertColorPale: rgba(45, 8, 10, 1);
      --Gray0 :         rgba(187, 216, 179, 1);
      --Gray10:         rgb(245, 255, 209);
      --Gray15:         rgba(162, 159, 21, 1);
      --Gray20:         rgba(41, 63, 20, 1);
      --Gray30:         rgba(40, 89, 67, 1);
      --Gray40:         rgba(84, 106, 118, 1);
      --Gray50:         rgba(81, 13, 10, 1);
      --Gray60:         rgba(25, 17, 2, 1);
      --HueRotate:      160deg;
      --Brightness:     100%;
       */

      /* --AlertColor:     rgb(145, 255, 231);
      --AlertColorDark:    rgb(66, 121, 109);
      --AlertColorPale:    rgba(45, 8, 10, 1);
      --Gray0 :            rgba(238, 241, 239, 1);
      --Gray10:            rgba(250, 255, 253, 1);
      --Gray15:            rgba(240, 243, 189, 1);
      --Gray20:            rgb(41, 215, 148);
      --Gray30:            rgba(2, 195, 154, 1);
      --Gray40:            rgba(0, 168, 150, 1);
      --Gray50:            rgb(2, 144, 144);
      --Gray60:            rgba(5, 102, 141, 1);
      --HueRotate:         180deg;
      --Brightness:        1.5; */
   
      /* --AlertColor:  rgb(60, 200, 255);
      --AlertColorDark: rgb(23, 77, 99);
      --AlertColorPale: rgba(45, 8, 10, 1);
      --Gray0 :         rgba(253, 236, 238, 1);
      --Gray10:         rgb(204, 227, 255);
      --Gray15:         rgba(219, 80, 74, 1);
      --Gray20:         rgba(120, 192, 224, 1);
      --Gray30:         rgba(68, 157, 209, 1);
      --Gray40:         rgba(57, 67, 183, 1);
      --Gray50:         rgba(21, 5, 120, 1);
      --Gray60:         rgba(14, 14, 82, 1);
      --HueRotate:      210deg; 
      --Brightness:     100%;
       */
    }
  /*#region*/
/* @media only screen  */
/* and (min-device-width : 1px)  */
/* and (max-device-width : 769px)  */
/* and (-webkit-min-device-pixel-ratio: 2) */
/* and (orientation : landscape) { */
  /* :root{--PDFComposeControlRibbonFontSize: 0.75vh;}     */
/* } */
/* @media only screen  */
/* and (min-device-width : 768px)  */
/* and (max-device-width : 1024px)  */
/* and (-webkit-min-device-pixel-ratio: 2) */
/* and (orientation : landscape) { */
  /* :root{--PDFComposeControlRibbonFontSize: 1.0vh;}     */
/* } */
/* @media only screen  */
/* and (min-device-width : 1025px)  */
/* and (max-device-width : 3000px)  */
/* and (-webkit-min-device-pixel-ratio: 2) */
/* and (orientation : landscape) { */
  /* :root{--PDFComposeControlRibbonFontSize: 1.5vh; */
    /* --TopRibbonHeight: 6.5vh; */
    /* --TimeLineMarkerHeight: 2.25vh; */
    /* --NavigationHeight: 4.00vh; */
    /* --PDFComposeControlRibbonHeight: 5.2vh;   */
   /* }   */
/* } */

@media screen and (1px    <= height <=  800px ) {
  :root{--TopRibbonHeight: 7vh; 
        --TimeLineMarkerHeight: 2.5vh;
        --NavigationHeight: 4.25vh;
        --PDFComposeControlRibbonHeight: 5.6vh;
       }
};
@media screen and (800px  < height <=  1000px) {
  :root{--TopRibbonHeight: 6.5vh;
        --TimeLineMarkerHeight: 2.25vh;
        --NavigationHeight: 4.00vh;
        --PDFComposeControlRibbonHeight: 5.2vh;  
       }
};
@media screen and (1000px < height <= 1500px) {
  :root{--TopRibbonHeight: 6vh;
        --TimeLineMarkerHeight: 2vh;
        --NavigationHeight: 3.5vh;
        --PDFComposeControlRibbonHeight: 4.5vh;
       }
};
@media screen and (1500px < height <= 2000px) {
  :root{--TopRibbonHeight: 6vh;
        --TimeLineMarkerHeight: 2vh;
        --NavigationHeight: 3.5vh;
        --PDFComposeControlRibbonHeight: 4.5vh;
       }
};

@media screen and (1px   <= width < 800px  ) {
  :root{--PDFComposeControlRibbonFontSize: 0.75vh;}  
}
@media screen and (800px <= width < 1000px  ) {
  :root{--PDFComposeControlRibbonFontSize: 1.0vh;}    
}
@media screen and (1000px <= width < 2500px ) {
  :root{--PDFComposeControlRibbonFontSize: 1.5vh;}    
}

@font-face {font-family: 'Arial'; src: url('../BP Appearance/Fonts/Arial.ttf'); };
@font-face {font-family: 'Baskerville'; src: url('../BP Appearance/Fonts/Baskerfille.ttf'); };
@font-face {font-family: 'BookmanOldStyle'; src: url('../BP Appearance/Fonts/Bookos.ttf'); };
@font-face {font-family: 'Cambria'; src: url('../BP Appearance/Fonts/Canbria.ttf'); };
@font-face {font-family: 'Centaur'; src: url('../BP Appearance/Fonts/Centaur.ttf'); };
@font-face {font-family: 'Garamond'; src: url('../BP Appearance/Fonts/Garamond Regular.ttf'); };
@font-face {font-family: 'Helvetica'; src: url('../BP Appearance/Fonts/Helvetica.ttf'); };
@font-face {font-family: 'Scala'; src: url('../BP Appearance/Fonts/Scale.ttf'); };
@font-face {font-family: 'Times-Roman'; src: url('../BP Appearance/Fonts/Times.ttf'); };

*{
  padding: 0;
  margin: 0;
  border: none;
}
/* text align */
.alignleft {
	float: left;
}
.alignright {
	float: right;
}

a{text-decoration: none;
  font-weight: 500;
  font-size: medium; 
  font-family: var(--Font);
  color:#fff;
  /* font-weight: bold; */
}

/* .blink {
  animation: blink 0.75s infinite;
} */
@keyframes blink {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.ActiveButtonImages{
  background: transparent;
  border: 2px solid var(--Gray20);
  border-radius: calc( var(--BorderRadiusFraction) * 2px);
  padding: 0 0 0 0;
  height: 3.3vh;
  width: auto;
  cursor: pointer;
  z-index: 1500;
  outline:none;
  /* object-fit: contain; */
}
@media screen and (height <= 900px) {
  .ActiveButtonImages{
    border: 1px solid var(--Gray20);
    padding: 0 0 0 0;
    /* object-fit: contain;     */
  }
}
.ActiveButtonImages:hover{
  background: var(--Gray0);
  transform: scale(1.15);
  padding: 0 0 0 0;
}

.ListButtonImages{
  background: transparent;
  border: 2px solid var(--Gray20);
  border-radius: calc( var(--BorderRadiusFraction) * 2px);
  padding: 0 0 0 0;
  height: 2.5vh;
  width: auto;
  cursor: pointer;
  z-index: 10;
  outline:none;
}
@media screen and (height <= 900px) {
  .ListButtonImages{
    border: 1px solid var(--Gray20);
  }
}
.ListButtonImages:hover{
  background: var(--Gray0);
  transform: scale(1.15);
}
/*#endregion*/

/* Landing Page */
  /*#region*/

  .Slogan{
    position: fixed;
    top: 9.25%;
    left: 24.25%;
    color: white;
    z-index: 100;
    background-color: transparent;
    width: 30vw;
    height: 5vh;
    display: block;
    font-size: 1.6  vh;
    font-family: var(--Font);
    text-align: center;
  }
  .SplashPageContact{
    position: fixed;
    top: 95%;
    left: 2.25%;
    color: white;
    z-index: 100;
    background-color: transparent;
    width: auto;
    height: 5vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    
    font-size: 1.6  vh;
    font-family: var(--Font);
    text-align: center;
  }
  .SplashPageContactButton{
    background: transparent;
    /* border: 2px solid var(--Gray20);
    border-radius: calc( var(--BorderRadiusFraction) * 2px); */
    padding: 0 0 0 0;
    height: 3vh;
    width: auto;
    cursor: pointer;
    z-index: 1500;
    outline:none;
  }
  .SplashPageContactButton:hover{
    scale: 1.15;

  }

  .LandingPage{
    position: absolute;
    /* transform: translate(0vw, -100vh);     */
    top: 0%;
    left: 0%;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 100;
    pointer-events: none;
  }
  .LandingPageImage{
    width: 100vw;
    height: 100vh;
    /* height: auto; */
    z-index: 100;
    object-fit: fill;
    display: inherit;   
    pointer-events: none;
  }
  .RemoveLandingPageAndEnter{
    display: inherit;
    position: absolute;
    top: 5%;
    right: 2.5%;
    background-color: transparent;
    border: none;
    pointer-events: all;
    cursor: pointer;
  }
  .RemoveLandingPageAndEnterImage{
    width: 5vw;
    height: auto;
  }

  .UserAssist{
    background: var(--Gray10);
    height: 3.5vh;
    /* width: 82vw; */
    width: 78.5vw;
    padding: 0 0 0 0;
    z-index: 1000;
    font: 1.5vh var(--Font);
    font-weight: 150;
    border: 1px solid black;
  }
  .UserAssistImage{
    max-height: 3vh;
    height: 3vh;
  }
  
  .ShowGeneralDocumentation{
    background: transparent;
    align-items: center;
    z-index: 10;
    border: none;
  }
  .UserAssistButtonImage:hover {
    transform: scale(1.15);
  }

  .UserAssistButtonImage{
    background: transparent;
    height: 30px;
    width: auto;
    border: 2px solid var(--Gray20);
    border-radius: calc( var(--BorderRadiusFraction) * 2px);        
    padding: 2px;        
    cursor: pointer;
    z-index: 10;
    margin: -5px 0 0 0;
  }  
  /*#endregion*/

/* Quick Guide */
  /*#region*/

.blur-background {
  transition: filter 0.5s ease; /* Smooth transition for filter */
  filter: blur(6px);
}
.blur-background.active {
  filter: blur(6px);
}
.ToggleQuickGuide{
  background: transparent;
  border: none;
  outline:none;
  width: auto;
}
.QuickGuide{
  position: fixed;
  top: 10%;
  left: 5%;
  background-color: var(--Gray5);
  width: 25%;
  height: 75%;
  box-sizing: border-box;
  border-radius: calc( var(--BorderRadiusFraction) * 8px);
  border: 3px solid rgb(245, 243, 242);
  opacity: 1;
  z-index: 3000;
  display: none;
  }
.QuickGuideTitle{
  height: 5%;
  position: relative;
  display: flex;
  flex-direction: row;  
  justify-content: space-between;
  font: 2.0vh var(--Font);
  font-weight: 500;
}
.QuickGuideInstructions{
  height: 17%;
  position: relative;
  font-size: 1.75vh;
}
.QGListOfElements{
  Height: 78%;
  overflow-y: scroll;
}

.QGbuttonImage{
background: transparent;
/* border: 1px solid var(--Gray20);
border-radius: calc( var(--BorderRadiusFraction) * 1px); */
height: 2.0vh;
width: 1.0vw;
cursor: pointer;
z-index: 1500;
outline:none;
border: 1px solid rgb(150 150, 150);
}
.QGbuttonImage:hover{
background: var(--Gray0);
transform: scale(1.15);
padding: 0 0 0 0;
}

.QGelement{
  font: 1.75vh var(--Font);
  font-weight: 500;
  margin-bottom: 0.35vh;
}
.QGelementSeparator{
  display: flex;
  flex-direction: column;  
  align-items: center;
}
.QuickGuideArrow{
  position:absolute;
  display: none;
  background: transparent;
  height: 6vh;
  width: 4vw;
  z-index: 1750;
}
.CloseQuickGuide{
  position: relative;
  font: 1.5vh var(--Font);
  font-weight: 500;  
  background-color: transparent;
  background: transparent;
  border: none;
  cursor: pointer;
  visibility: inherit;
  outline:none;
}
.QGExampleImage{
border: 5px solid black;
border-radius: calc( var(--BorderRadiusFraction) * 1px);
filter: none !important;
}

.OrderingExample{
  position: fixed;
  top: 10%;
  left: 32%;
  background-color: var(--Gray10);
  /* width: 35%;
  height: 70%; */
  box-sizing: border-box;
  border-radius: calc( var(--BorderRadiusFraction) * 8px);
  border: 3px solid rgb(245, 243, 242);
  opacity: 1;
  z-index: 3100;
  display: none;
  filter: none !important;
}

/*#endregion*/

/* Search Quick Guide */
  /*#region*/
.SearchQuickGuide{
  position: fixed;
  top: 27%;
  left: 2%;
  background-color: var(--Gray5);
  width: 35%;
  height: 60%;
  box-sizing: border-box;
  border-radius: calc( var(--BorderRadiusFraction) * 8px);
  border: 3px solid rgb(245, 243, 242);
  opacity: 1;
  z-index: 3000;
  display: none;
}
.SearchQuickGuideInstructions{
  height: 10%;
  position: relative;
  font-size: 1.75vh;
}
.SearchQGListOfElements{
  Height: 85%;
  overflow-y: scroll;
}

.SearchExample{
  position: fixed;
  top: 9.5vh;
  left: 20%;
  background-color: var(--Gray10);
  box-sizing: border-box;
  border-radius: calc( var(--BorderRadiusFraction) * 8px);
  border: 3px solid rgb(245, 243, 242);
  opacity: 1;
  z-index: 3100;
  display: none;
}
.SearchList{
  position: fixed;
  top: 9.5vh;
  left: calc( (100vw - var(--PopUpWindowWidth)*1.3333)/2 + var(--PopUpWindowWidth));
  width: calc( var(--PopUpWindowWidth)/3);
  background-color: var(--Gray10);
  box-sizing: border-box;
  border-radius: calc( var(--BorderRadiusFraction) * 8px);
  border: 3px solid rgb(245, 243, 242);
  opacity: 1;
  z-index: 3100;
  display: none;
}
/*#endregion*/

/* Locate Quick Guide */
  /*#region*/
  .LocationQuickGuide{
    position: fixed;
    top: 15vh;
    left: 5%;
    background-color: var(--Gray5);
    width: 25vw;
    height: 70%;
    box-sizing: border-box;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    border: 3px solid rgb(245, 243, 242);
    opacity: 1;
    z-index: 3000;
    display: none;
  }
  .LocationQuickGuideInstructions{
    height: 20%;
    position: relative;
    font-size: 1.75vh;
    /* display: inherit */
  }
  .LocationQGListOfElements{
    Height: 75%;
    overflow-y: scroll;
    /* display: inherit; */
  }
  .LocationExample{
    position: fixed;
    top: 15vh;
    left: 32%;
    width: 20vw;
    height: auto;
    background-color: var(--Gray10);
    box-sizing: border-box;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    border: 3px solid rgb(245, 243, 242);
    opacity: 1;
    z-index: 3100;
    display: none;
  }
  /*#endregion*/

/* Circle Progress */
  /*#region*/
.CircleProgressDiv{
  background-color: transparent;
  width: 75px;
  height: 75px;
  position: fixed;
  right: calc(50vw - 38px);
  top: 55%;
  display: none;
  z-index: 10000;
}
.circle-progress{
  width: 75px;
  height: 75px;
  padding: 0 0 0 10px;
}
.circle-progress-value{
  stroke-width: 12px;
  /* stroke: white; */
  stroke: var(--CircleProgressColor);
  stroke-dasharray: 4 2;
}
.circle-progress-circle{
  stroke-width: 12px;
  stroke: transparent;
}
.circle-progress-text{
  font-weight: bold;
  fill: var(--CircleProgressColor);
  /* fill: white; */
  font-size: xx-large; 
  font-family: var(--Font);
}

.CircleProgress{
  display: block;
  visibility: hidden;
  position: absolute;
  top: 46%;
  left: 46%;
  width: 8%;
  height:8%;
  z-index: 5000;
}

.track {
  stroke-width: 0;
  stroke: lightgrey;
  fill: transparent;
  visibility: inherit;
  z-index: 5000;
}
.progress {
  stroke-width: 10;
  stroke: rgb(255, 255, 255);
  stroke-linecap: round;
  stroke-dasharray: var(--TotalStrokeLength);
  /* 206; */
  /* var(--TotalStrokeLength) */
  /* 3.75 2.125; */
  stroke-dashoffset: var(--StrokeLength);
  stroke-linecap: butt;
  fill: transparent;
  transform: rotate(270deg);
  transform-origin: center;
  visibility: inherit;
  z-index: 5000;
}
.CircleProgressPercent{
  position: absolute;
  display: flex;
  width: 25%;
  top: 32%;
  left: 40%;
  font-weight: bold;
  font-size: 2.25vh; 
  font-family: var(--Font);
  color: white;
  justify-content: center;
  visibility: inherit;
  z-index: 5000;
}

.Spinner{
  display: none;
  position: absolute;
  top: 46%;
  left: 46%;
  width: 3%;
  padding-top: 3%;
  z-index: 5000;
  border: 6px solid;
  border-radius: 50%;
  border-color: white transparent transparent  transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.BlinkingLoading{
  position: absolute;
  background-color: transparent;
  width: 40%;
  height: 5%;
  top: 35%;
  left: 30%;
  text-align: center;
  font-family: var(--Font);
  font-weight: 1000;
  font-size: 35px;
  color: white;
  z-index: 5000;  
  display: flex;  
}

/*#endregion*/

/* General Settings */
  /*#region*/
  .GeneralSettingsButton{
    background: transparent;
    align-items: center;
    z-index: 10;
    border: none;
  }

  .GeneralSettings{
    position: fixed;
    top: 5%;
    right: 25%;
    font: 1.5vh var(--Font);
    font-weight: 150;
    visibility: hidden;
    background-color: var(--Gray10);
    width: 50%;
    height: 85%;
    box-sizing: border-box;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    border: 3px solid seashell;
    opacity: 1;
    z-index: 100;
    display: flex;
    flex-direction: column;
  }
  .GeneralSettingsControls{
    display: flex;
    flex-direction: row;
    height: 7%;
    width: 100%;
    position: relaive;
    align-items: center;
  }
  #GeneralSettingsDrag{
    width: 25 px;
    height: 25 px;
    cursor:grabbing;
  }
  .SaveGeneralSettingsButton{
    background-color: transparent;
    border: none;
    text-align: center;
    cursor: pointer;
    visibility: inherit;
    position: absolute;
    top: -5px;
    right: 40px;
    height: 25px;
    font-size: 33px;
    font-weight: 900;
    outline:none;
  }
  .GeneralSettingsTitle{
    padding: 0 0 0 25px;
    font: 3vh var(--Font);
    font-weight: 150;
  }
  .CloseGeneralSettingsButton{
    background-color: transparent;
    border: none;
    text-align: center;
    cursor: pointer;
    visibility: inherit;
    margin-left: auto;
    height: 35px;
    width: auto;
    width: auto;
    outline:none;
  }
  .CloseGeneralSettingsButton:hover{
    transform: scale(1.15); 
  }

  .GeneralSettingsContent{
    display: flex;
    flex-direction: column;
    height: 85%;
    width: 100%;
    overflow-y: scroll;
  }
  .SettingsIcon{
    width: 15px;
    height: 15px;
    background: transparent;
  }
  .SettingsSectionTitle{
    height:auto;
    margin: 2vh 0 2vh 0;
  }

  /* global setting */
  .GlobalSettings{
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .SystemFontContainer{
    padding: 0 0 0 25px;
  }
  .SystemFont{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1vh;
  }
  .FontChoice{
    display: flex;
    flex-direction: row;
    padding: 0 1vw 0 0;
    font-weight: 750;
    font-size: 1.75vh;
  }

  .ColorSchemeLabel{
    position: relative;
    height: 10px;
    background: transparent;
    color: black;
    width: 35%;  
    padding: 20px 0 0 25px;
  }
  .ColorSchemeChoice{
    position: relative;
    display: flex;
    flex-direction: row;
    height: auto;
  }
  .RadioButtonForColors{
    position: relative;
    padding: 0 0 0 50px;
  }
  
  .BorderRoundness{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    margin: 40px 0 0 25px;
  }
  .SettingsFrameRoundnessSliderLabel{
    height: auto;
    background: transparent;
    color: black;
    padding: 0 25px 0 0;
  }
  .SettingsFrameRoundnessSlider{
    -webkit-appearance: none;
    appearance: none;
    width: 10vw;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 3px);
    background: var(--Gray20);
    outline: none;
    opacity: .75;
    -webkit-transition: .1s;
    transition: opacity .1s;
  }
  .SettingsFrameRoundnessSlider:hover {
    opacity: 1;
  }
  .SettingsFrameRoundnessSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 20%);
    background: var(--SliderThumbColor);
    color: var(--Gray0);
    cursor: pointer;
  }
  .SettingsFrameRoundnessSlider::-moz-range-thumb {
    width: 15px;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 50%);
    background: var(--SliderThumbColor);
    cursor: pointer;
    opacity: 1;
  }

  /* background type */
  .BackgroundType{
    position: relative;
    height: auto;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  .SettingsBackgroundTypeLabel{
    height: auto;
    background: transparent;
    color: black;
    padding: 0 0 0 25px;
    display: flex;
    flex-direction: row;
  }

  /* color picking */
  .BackgroundColorPicker{
    position: relative;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0 0 0 0.5vw;
    cursor: pointer;
  }
  .ColorPicker{
    position: relative;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0 20px 0 20px;
    cursor: pointer;
  }
  /* image picking  */
  .BackgroundImagePicker{
    position: relative;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0 0 0 0.5vw;
    cursor: pointer;
  }
  /* background image brightness */
  .BackgroundSlider{
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  .SettingsBackgroundImageBrightnessSlider{
    position: relative;
    -webkit-appearance: none;
    appearance: none;    
    width: 10vw;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 3px);
    background: var(--Gray20);
    outline: none;
    opacity: .75;
    -webkit-transition: .1s;
    transition: opacity .1s;
  }
  .SettingsBackgroundImageBrightnessSlider:hover {
    opacity: 1;
  }
  .SettingsBackgroundImageBrightnessSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 20%);
    background: var(--SliderThumbColor);
    color: var(--Gray0);
    cursor: pointer;
  }
  .SettingsBackgroundImageBrightnessSlider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: calc( var(--BorderRadiusFraction) * 50%);
    background: var(--SliderThumbColor);
    cursor: pointer;
    opacity: 1;
  }
  .SettingsBackgroundImageBrightnessSliderLabel {
    height: 10px;
    background: transparent;
    color: black;
    padding: 0 0 0 25px;
  }
  /* element size  */
  .SummaryDataSize{
    padding: 0 0 0 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .SummaryDataSizeLabel{
    padding: 0 2vw 0 0;
  }

  /* timeline element  */
  .SummaryComponents{
    display: flex;
    flex-direction: row;
  }
  .SummaryComponentLabel{
    padding: 0 0 0 25px;
  }
  .SetSummaryComponentsImage{
    width: 15px;
    height: 15px;
    background: transparent;
  }
  .SetSummaryComponentsButton{
    padding: 0 0 0 5px;
    background: transparent;
    outline: none;
    border: none;
  }
  .SummaryDataBackground{
    position: relative;
    display: flex;
    flex-direction: row;    
  }
  .SummaryDataColorPicker{
    position: relative;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0 20px 0 20px;
    cursor: pointer;
  }
  .SummaryDataColorPickerPlace{
    position: relative;
    left: -50px;
    top: 10px;
    visibility: hidden;
  }
  .SummaryDataBackgroundTransparencySlider{
    position: relative;
    -webkit-appearance: none;
    appearance: none;    
    width: 10vw;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 3px);
    background: var(--Gray20);
    outline: none;
    opacity: .75;
    -webkit-transition: .1s;
    transition: opacity .1s;
  }
  .SummaryDataBackgroundTransparencySlider:hover {
    opacity: 1;
  }
  .SummaryDataBackgroundTransparencySlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 20%);
    background: var(--SliderThumbColor);
    color: var(--Gray0);
    cursor: pointer;
  }
  .SummaryDataBackgroundTransparencySlider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: calc( var(--BorderRadiusFraction) * 50%);
    background: var(--SliderThumbColor);
    cursor: pointer;
    opacity: 1;
  }
  .SummaryDataBackgroundTransparencySliderLabel {
    position: relative;
    font: calc(58vw/60) var(--Font);
    font-weight: 200;
    height: 10px;
    background: transparent;
    color: black;
    padding: 0 25px 0 25px;
  }
  .SummaryDataTextColorPickerPlace{
    position: relative;
    left: -50px;
    top: 10px;
    visibility: hidden;
  }
  .SettingsIconSmall{
    width: 1vw;
    height: 1vh;
  }
  .SettingsIconLarge{
    width: 2vw;
    height: 2vh;
  }
  .SummaryDataSizeSlider{
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 10vw;
  height: 10px;
  border-radius: calc( var(--BorderRadiusFraction) * 3px);
  background: var(--Gray20);
  outline: none;
  opacity: .75;
  -webkit-transition: .1s;
  transition: opacity .1s;
  }
  .SummaryDataSizeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 10px;
    border-radius: calc( var(--BorderRadiusFraction) * 20%);
    background: var(--SliderThumbColor);
    color: var(--Gray0);
    cursor: pointer;
  }
  /* full data diplay */
  .FullDataDisplay{
    position: relative;
    display: flex;
    flex-direction: row;        
  }
  .FullDataColorPicker{
    position: relative;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0 20px 0 20px;
    cursor: pointer;
  }
  .FullDataComponents{
    display: flex;
    flex-direction: row;
  }
  .FullDataComponentLabel{
    padding: 0 0 0 25px;
  }    
  .FullDataColorPickerPlace{
    position: relative;
    /* left: 50px; */
    top: 10px;
    visibility: hidden;
  }
  /* <!-- User pick a BP (web-stored) or custom (local) layout template --> */
  .BPorCustomPDFLayout{
    position: relative;
    margin: 0 0 0 25px;        
  }  
  .ClearStorage{
    /* position: relative; */
    font: 1.5vh var(--Font);
    font-weight: 150;    
    /* height: 40px; */
    background: transparent;
    border: none;
    padding: 0 0 0 5%;
    cursor: pointer;
  }

  /*#endregion*/

/* <!-- ProcessingWait, Move, etc  --> */
  /*#region*/
 
  .MoveImage{
    background: transparent;
    border: none;
    height: 25px;
    width: 27px;
    padding: 0 0 0 2;
    cursor: grabbing;
    z-index: 10;
    outline:none;
    filter: hue-rotate(var(--HueRotate)) brightness(var(--Brightness));
  }
  
  .MoveImageCompElement{
    background: transparent;
    border: none;
    height: 15px;
    width: 15px;
    padding: 0 0 0 0;
    cursor: grabbing;
    z-index: 40;
    outline:none;
    filter: hue-rotate(var(--HueRotate)) brightness(var(--Brightness));
  }
  /*#endregion*/

/* <!-- Scroll bar styling --> */
  /*#region*/
    ::-webkit-scrollbar {
      width: 10px;
      color: var(--Gray50);
    }
    ::-webkit-scrollbar-track {
      color: var(--Gray50);
      border-radius: calc( var(--BorderRadiusFraction) * 5px);
    }
    ::-webkit-scrollbar-track-piece{
      background: var(--Gray10);
      -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);       
    }
    ::-webkit-scrollbar-thumb {
      background: var(--Gray10);
      border-radius: calc( var(--BorderRadiusFraction) * 5px);
      opacity: 1;
      background: var(--AlertColor);
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--SliderThumbColor);
    }
  /*#endregion*/
  
/* <!-- Settings and Functions button and dropdown --> */
  /*#region*/

  .Anchor{
    position: absolute;
    left: 93.5vw;
    top: 0.55vh;
    height: calc( var(--TopRibbonHeight) * 0.8); 
    /* width: auto; */
    width: 2.25 vw;
    z-index: 1000;
    font: calc(40vw/50) var(--Font);
    font-weight: 225;
    color: var(--Gray60);
    background-color: var(--Gray0);
    text-align: center;
    outline: none;
    border: 1px solid black;    
    cursor: pointer;
  }
  .Anchor:hover {
    background-color: var(--Gray20);
    color: var(--Gray0);
  }
  .AnchorImage{
    height: 4vh;
    width: 2.25vw;   
    margin: 0 0 0 -.25vw;          
  }

  .FilesAndFunctions{
    position: absolute;
    left: 96.5vw;
    height: calc( var(--TopRibbonHeight) * 0.8); 
    /* width: auto; */
    width: 2.25 vw;
    z-index: 1000;
    padding: 0.5vh 0 0 0;
  }
  
  .OpenDropDownMenu{
    position: relative;
    right: 0;
    display: block;
    /* border: 1px solid black; */
    border: 2px solid var(--Gray20);
    border-radius: calc( var(--BorderRadiusFraction) * 2px);
    /* width: auto; */
    width: 2.25 vw;
    height: calc( var(--TopRibbonHeight) * 0.8); 
    outline:none; 
    cursor: pointer;
    /* background-color:  rgb(245, 245, 245); */
    background-color: transparent;    
    color: var(--AlertColor);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .OpenDropDownMenu:hover{
    transform: scale(1.15);
    background-color: rgb(245, 245, 245);    
  }

    /* .WikipediaOptions, */
    .DropDownMenuContent,
    .MoreFilesAndFunctions{
      display: flex;
      flex-direction: column;
      position: relative;
      left: -12vw;/* transform: translate(-0.5vw, 5.5vh); */
      z-index: 1000;
      background: rgb(245, 245, 245);
      background-color: transparent;      
      visibility: visible;
      height: auto;
      width: 16vw;
    }
    .MoreFilesAndFunctions{
      transform: translate(-0.vw, 2.75vh);
    }
    /* .WikipediaOptions{
      width: 12vw;
      top: 6vh;
      left: 50.5%;
      visibility: hidden;
    } */

    .DropDownMenuImage{
      width: 4.2vh;
      height: 4.2vh;
      vertical-align: middle;
      pointer-events: none;
      padding: 0 0 0 0;
    }
        /* .WikipediaOptionsButton, */
        .UploadDataButton,
        .MakeDOCfromBookPageantButton,
        .ComposefromBookPageantButton,
        .OpenCompressImagesButton,
        .MakeBookPageantFileButton,
        .MapCSVtoBPButton,
        .CheckCSVButton,
        .ParseCSVFileButton,
        .openBookPageantFileButton{
          height: 3vh;
          font: calc(50vw/50) var(--Font);
          font-weight: 600;
          border: none;
          padding: 0 0 0 10;
          color: var(--Gray60);
          background-color: var(--Gray0);
          text-align: left;
          outline: none;
          cursor: pointer;
          vertical-align: middle;
        }

        .UploadDataButton:hover,
        .MakeDOCfromBookPageantButton:hover,
        .ComposefromBookPageantButton:hover,
        .OpenCompressImagesButton:hover,
        .MakeBookPageantFileButton:hover,
        .MapCSVtoBPButton:hover,
        .CheckCSVButton:hover,
        .ParseCSVFileButton:hover,
        .openBookPageantFileButton:hover {
          background-color: var(--Gray20);
          color: var(--Gray0);
        }
        .MakeDOCfromBookPageantButton{
          opacity: 0.2;
        }
        .MakeDOCfromBookPageantButton:hover {
          background-color: var(--Gray20);
          color: var(--Gray0);
        }

        
        .MakeDOCfromBookPageantButtonImage{
          width: calc(6vh);
          height: calc(2.8vh);
          vertical-align: middle;
        } 
        .UploadDataButtonImage{
          width: calc(4vh);
          height: calc(2.8vh);
          padding: 0 0 0 .3vw;
          vertical-align: middle;          
        }

        .CloseButton,
        .OpenMoreMenuButton{
          height: 3vh;
          font: calc(50vw/50) var(--Font);
          font-weight: 600;
          border: none;
          padding: 0 0 0 10;
          color: var(--Gray60);
          background-color: var(--Gray0);
          text-align: left;
          outline: none;
          cursor: pointer;
        }
        .OpenMoreMenuButtonImage{
          width: calc(2.5vh);
          height: calc(2.5vh);
          vertical-align: middle;
        }

        .CloseButton:hover {
          background-color: var(--Gray20);
          color: var(--Gray0);
        }
        .CloseButtonImage{
          width: calc(3vh);
          height: calc(3vh);
          vertical-align: middle;
        } 

    .FileTypeIcon{
      width: calc(vh);
      height: calc(3vh);
      vertical-align: middle;
    }
    .show {display: block;}
        
    .ComposefromBookPageantButtonImage{
      width: calc(3vh);
      height:calc(3vh);
      vertical-align: middle;
    } 
    /*#endregion*/

/* <!-- Wikipedia context options buttons and dropdown --> */
  /*#region*/
    .WikipediaOptions{
      position: absolute;
      width: 20vw;
      left: 69vw;
      top: 6.0vh;
      /* height: 75vh; */
      height: auto;
      font: 1.75vh var(--Font);
      font-weight: 750;
      display: none;
      flex-direction: row;
      z-index: 1000;
      margin: 0 0 0 0;
      color: black;
      background-color: var(--Gray10);
      justify-content: space-between; /* text-align: center; */
      border: 2px solid seashell;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);
    }
    .WikipediaOptionsControl{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 20px 0 10px
    }
    .WikipediaOptionsLabel{
      position: inherit;
      font: 1.75vh var(--Font);
      font-weight: 750;
      display: inherit;
      text-align: center;
      padding: 0 5px 0 5px;
    }
    .WikipediaOptionsContainer {
      width: 99%;
      left: 0%;
      top: 5%;
      height: 95.5%;
      font: 1.75vh var(--Font);
      font-weight: 150;
      overflow-x: hidden;
      overflow-y: scroll;
      display: none;
      flex-direction: row;
      align-items: left;
      z-index: 1000;
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      color: black;
      background-color: var(--Gray10);
      border: 2px solid seashell;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);    
    }
 /*#endregion*/

/* <!-- Collector's Timeline Categories functions --> */
  /*#region*/

  .CollectorsTimelineCategoriesLists{
    background-color: var(--Gray15);
    width: calc( var(--PopUpWindowWidth)/3);
    height: 70vh;
    position: absolute;
    left: calc( (100vw - var(--PopUpWindowWidth)*1.3333)/2 + var(--PopUpWindowWidth) );      
    right: calc();
    top: 10vh;
    border: 3px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    z-index: 20;
    font: 2vh var(--Font);
    font-weight: 1000;
    visibility: hidden;
    padding-right: 10px;
    box-sizing: border-box;
    color: white;
    outline:none;
    overflow-y: scroll;
  }
  .CollectorsTimelineCategoriesListsJump{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    font-size: 1.75vh;
    font-weight: 750;
    line-height: 2vh;
    width: 90%;
    padding: 0 0 .75vh .5vw;
    background-color:  var(--Gray15);
    color: white;
    cursor: pointer;
    overflow-wrap: normal;    
  }
  .CollectorsTimelineCategoriesFunctions{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 4vh;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--Gray15);
    padding: 0.5vh 0 0 0;
    margin: 0 0 0 .5vw;
  }
  .CollectorsTimelineCategoriesFunctionButton{
    border: 2px solid var(--Gray20);
    border-radius: calc( var(--BorderRadiusFraction) * 2px);
    width: 33%;
    height: 3vh;
    background-color: var(--Gray15);
    color: white; /* var(--AlertColor); */
    font-weight: 750;
    font-size: 1.60vh;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }
  .CollectorsTimelineCategoriesFunctionButton:hover{
  transform: scale(1.15);
  outline: 3px solid var(--AlertColor);
  /* background-color: rgb(245, 245, 245); */
  }
  /*#endregion*/

/* <!-- Make BP file from .bp.csv file and compressed images--> */
  /*#region*/
  .MakeBPfile{
    background-color: var(--Gray10);
    border: 3px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);        
    width: 30%;
    height: 25%;
    position: absolute;
    left: 35%;
    top: 20%;
    z-index: 1250;
    font: 2vh var(--Font);
    font-weight: 250;        
    display: flex;
    flex-direction: column;
    visibility: hidden;
  }
  .MakeBPfileControls{
    background-color: var(--Gray10);
    border: none;
    width: 100%;
    height: 15%;
    left: calc(50%);
    top: 35%;
    z-index: 1250;
    font: 2vh var(--Font);
    display: flex;
    flex-direction: row;
    visibility: inherit;
    margin: 0.5vh 0 1.5vh 0;
  }
  .CloseMakeBPfileButton{
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    visibility: inherit;
    width: 25px;
    height: 25px;
    outline:none;
    position: absolute;
    right: 20px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }
  .UploadFiles{
    background-color: transparent;
    background: transparent;
    border: 2px solid var(--Gray30);
    border-radius: calc( var(--BorderRadiusFraction) * 8px);    
    cursor: pointer;
    visibility: inherit;
    width: auto;
    height: 35px;
    font: 2vh var(--Font);
    font-weight: bold;            
    padding: 0 5px 0 5px;
    margin: 0.5vh 0 0 1vw;
    margin-right: auto;
  }
  .UploadFiles:hover{
    background-color: var(--Gray0);
  }

  .wait{
    /* margin: auto; */
    border: 5px solid #EAF0F6;
    border-radius: 50%;
    border-top: 5px solid var(--AlertColor);
    width: 20px;
    height: 20px;
    animation: spinner 2s linear infinite;
    margin: 0 0 0 10px;
  }
  @keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .SpinnerAndButton{
    display: flex;
    flex-direction: row;
  }

  .MakeBPProgress{
    background-color:transparent;        
    height: auto;
    width: 25%;
    position: relative;
    left: 37.5%;
    visibility: inherit;
    display: none;
    margin: 5% 0 0 0;        
  }
  /*#endregion*/

/* <!-- CSV to BP data mapping  and CSV file checking--> */
  /*#region*/
  .BPFieldMapping{
    background-color: var(--Gray10);
    width: 46vw;
    position: absolute;
    left: 9.0vw;
    top: 10vh;
    border: 2px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    z-index: 50;
    font: 2vh var(--Font);
    font-weight: 150;
    visibility: hidden;
  }
  .BPFieldMappingControls{
    height: 5vh;
    display: flex;
    flex-direction: row;
    align-items:center;
    padding: 0 .7vw 0 0;
    visibility: inherit;
  }
  .LibraryName{
    display: flex;
    flex-direction: row;
    margin: 0 20% 0 0;
  }

  .RetrieveBPFieldMappingButton,
  .SaveBPFieldMappingButton,
  .SaveBPCSVButton,
  .ClearBPFieldMappingButton,
  .HelpBPFieldMappingButton,
  .CloseBPFieldMappingButton{
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    visibility: inherit;
    width: 25px;
    height: 25px;
    outline:none;
    padding: 0 0 0 0;
    margin: -5px 10px 0 10px;
  }
  
  .RetrieveBPFieldMappingButton:hover,
  .SaveBPFieldMappingButton:hover,
  .SaveBPCSVButton:hover,
  .ClearBPFieldMappingButton:hover,
  .HelpBPFieldMappingButton:hover,
  .CloseBPFieldMappingButton:hover{
    transform: scale(1.15);
  }

  .TitleLeaf{
    position: absolute;
    bottom: 0;
    left: 2.75vw;
  }
  .TitleLeafBox{
    position: absolute;
    bottom: 0;
    left: 1.5vw;
  }
  .TitlePageText{
    position: relative;
    bottom: -10vh;
    display: none;
    overflow: visible;
  }
  .TitlePageTextInput{
    display: inherit;
    resize: both;
    width: 20vw;
    height:10vh;
  }

  .BPFieldElementLabels{
    position: relative ;
    background-color: var(--Gray10);
    width: 45.0vw;
    height: 5vh;
    z-index: 500;
    font: 1.9vh var(--Font);
    font-weight: 150;    
    color:black;
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    grid-column-gap: 5px;
    grid-row-gap: 0px;    
    padding: .5vh .5ww .5vh .5vw;
    margin: 0 0 0 .525vw;
  }
  .AvailableBPFieldElements{
    background-color: var(--Gray15);
    width: 45vw;
    height: 65vh;
    left: 9.0vw;
    position: fixed;
    border: 2px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    z-index: 50;
    font: 1.9vh var(--Font);
    font-weight: 150;
    visibility: hidden;
    padding-left: .5vw;
    padding-top: .5vh;
    padding-right: .5vw;
    padding-bottom: .5vh;
    color: seashell;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 0px;
    overflow-y: scroll;    
  }

  .BPFieldElementHeader1,
  .BPFieldElementHeader2,
  .BPFieldElementHeader3{
    width: 16vw;
    text-align: center;
    background-color: var(--Gray20);    
    display: block;
    color:black;
    font-weight: 750;
    visibility: inherit;
  }
  .BPFieldElementHeader3{
    width: 12.5vw;
  }

  .BPFieldElement{
    width: 16vw;
    height: 2.5vh;
    border: 1px dotted var(--Gray60);
    box-sizing: border-box;
    padding: .2vh;
  }
  
    .BPFieldElementPair{
    width: 16vw;
    height: 2.5vh;
    border: 1px dotted var(--Gray60);
    padding-left: 5px;
    padding-top: 0px;
    padding-right: 0px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .BPFieldElementName{
    font-weight: 750;
  }

  .AvailableCSVFieldElements{
    background-color: var(--Gray0);
    width: 35vw;
    height: 76vh;
    position: fixed;
    left: 56vw;
    top: 10vh;
    border: 2px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    z-index: 50;
    font: 2vh var(--Font);
    font-weight: 150;
    visibility: hidden;
    color: black;
    outline:none;
  }

  .AvailableCSVFieldElementsList{
    background-color: var(--Gray0);    
    border: 2px solid black;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    visibility: inherit;
    color: black;
    outline:none;
    overflow-y: scroll;
    height: 86.5%
  }
  .BPHeaderHelp{
    visibility: hidden;
    width: 15vw;
    height: 15vh;
    position: fixed;
    top: 0vh;
    left: 1vw;
    background-color: seashell;
    color: black;
    z-index: 1000;
    padding: .5vw

  }

  .CSVFieldElement{
    color: black;
    padding: 0 0 0 10px;
    margin: 0 0 0 0;
    z-index: 30;
    cursor: move;
    width: 30vw;
    /* height: 2.5vh; */
    overflow-x: hidden;
  }
  .ShowHeaderDataButton{
    width: 25px;
    height: 25px;
    background: transparent;
    border: none;
    margin: 0 10px 0 0;
    display: inline;
    visibility: hidden;
    z-index: 100;
  }

  .CSVAnalysis{
    width: 35vw;
    height: 500px;
    position: relative;
    visibility: inherit;
    z-index: 50;
    font: 2vh var(--Font);
    font-weight: 125;
    overflow-y: scroll;
  }
  .FormatCSVFileDataButton{
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    visibility: inherit;
    width: 25px;
    height: 25px;
    outline:none;
    margin: 0 10px 0 0;    
  }
  .CSVDataTextModify{
    display: flex;
    flex-direction: row;
    visibility: hidden;
    width: 5vw;
    height: 2vh;
    font-style: italic;
    border: 2px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    z-index: 1100;
  }
  .TextModifyButton{
    width: 2vw;
    height: 5vh;
    background: seashell;
    border: none;
    opacity: 1.0;
  }
  .TextModifyButton:hover {
    background:var(--Gray40);
    opacity: 1;
    cursor: pointer;    
  }

  .SpellCheckCSVFileDataButton{
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    visibility: inherit;
    width: 25px;
    height: 25px;
    outline:none;
    margin: 0 10px 0 4.925vw;
  }
  .FindSpellCheckErrosCSVFileDataButton{
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    visibility: inherit;
    width: 25px;
    height: 25px;
    outline:none;    
    margin: 0 10px 0 0;
  }
  .CSVFileDataViewingDrag{
    width: 25 px;
    height: 25 px;
    cursor:grabbing;    
    margin: 0 30% 0 0;    
  }
  .StartCSVFileDataViewingButton{
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    visibility: inherit;
    width: 25px;
    height: 25px;
    outline:none;
    position: relative;
    padding: 0 0 0 0;
    margin: 0 0 0 10px;
  }
  /*#endregion*/
  
/* <!-- Image Processing --> */
  /*#region*/

  .ImageProcessingWindow{
    background-color: var(--Gray10);
    width: 60%;
    height: 70%;
    position: fixed;
    left: 20%;
    top: 15%;
    border: 2px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    z-index: 50;
    visibility: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .ImageProcessingControls{
    display: flex;
    flex-direction: row;
    flex-wrap:nowrap;
    justify-content: space-between;
    visibility: inherit;
    padding: 10px 10px 0 10px;
    height: 5vh;     
  }

  .LeftImageProcessingControls{
    display: flex;
    flex-direction: row;
    visibility: inherit;
    align-items: center;
    width: 15vw;
    height: 5vh;     
  }
  .RightImageProcessingControls{
    display: flex;
    flex-direction: row;
    justify-content: flex-end; 
    visibility: inherit;
    align-items: center;
    width: 32vw;
    height: 5vh; 
    gap: .3vw;
    margin-left: auto;
  }

  .ImageProcessingTitle{
      padding: 0 0 0 20px;
      font: 2.5vh var(--Font);
      font-weight: 100;
  }
  .ImageProcessingProgress{
    height: 25px;
    position: absolute;
    left: 17vw;
    z-index: 500;
  }

  .CompressAllImagesButton{ 
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    outline:none;
    visibility: inherit;
    padding: 0;
    margin: 0;
  }
  .ImageCompressionLevel{
    background-color: transparent;
    color:rgb(0, 0, 0);
    width: 2.5vw; 
    border-style: solid;
    border-color: var(--AlertColor);
    border-width: 2px;
    cursor: pointer;
    visibility: inherit ;      
  }
  .PrevPreviewImageButton,
  .PreviewCompressImagesButton,
  .CompressImagesInCSVButton,
  .CompressImagesButton,
  .StopCompressImagesButton,
  .CancelCompressImagesButton,
  .SaveImageProcessingReportButton,
  .ZIPImageProcessingButton,
  .SaveImageProcessingButton,
  .HelpImageProcessingButton,
  .CloseImageProcessingButton{
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    outline:none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .PrevPreviewImageButton:hover,
  .PreviewCompressImagesButton:hover,
  .CompressImagesInCSVButton:hover,
  .CompressAllImagesButton:hover,
  .CompressImagesButton:hover,
  .ImageCompressionLevel:hover,
  .StopCompressImagesButton:hover,
  .CancelCompressImagesButton:hover,
  .SaveImageProcessingReportButton:hover,
  .ZIPImageProcessingButton:hover,
  .SaveImageProcessingButton:hover,
  .HelpImageProcessingButton:hover,
  .CloseImageProcessingButton:hover{
    transform: scale(1.15);
  }

  .SaveImageProcessingButton:disabled,
  .ZIPImageProcessingButton:disabled,
  .SaveImageProcessingReportButton:disabled,
  .PreviewCompressImagesButton:disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  .ImageProcessingContainer{
    position: relative;    
    width: 100%;
    height: 90%;
    overflow-x: hidden;
    overflow-y: scroll;
    font: 1.75vh var(--Font);
    font-weight: 150;
    padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
    color: black;    
  }
  .PreviewImage{
    position: absolute;
    top: 10%;
    right: 1%;
    /* transform: translate(30vw, 5vh); */
    height: 75%;
    width: 50%;
    border: 1px solid seashell;
    object-fit: contain;
    max-width: 500px;
    max-height: 500px;
    font: var(--Font);
    background-size: contain;
    display: none;
    z-index: 1000;
  }
  .PreviewImageLabeling{
    position: absolute;
    top: 85%;
    right: 1%;
    height: 11%;
    width: 50%;
    border: 1px solid seashell;
    object-fit: contain;
    font: var(--Font);
    background-size: contain;
    z-index: 1000;
    display: none;
  }
  .ImageCompression,
  .PreviewImageFileName{
    height: 2vh;
    overflow: hidden;
  }
  .PreviewImageGallery{
    z-index: 1000;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;        
  }

  .ClosePreviewImagesButton{
    position: absolute;
    top: 10%;
    right: 52%;
    background-color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    outline:none;
    padding: 0 0 0 0;
    text-align: center;
    display: none;
    z-index: 1000;    
  }

  /*#endregion*/

/* <!-- Display settings --> */
  /*#region*/
  .DisplaySettings{
  position: absolute;  
  left: 42vw;
  top: .5vh;
  height: 6vh;
  width: 20vw;
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }
  .ProcessDataNumerically{
    /* position: relative; */
    height: calc( var(--TopRibbonHeight) * 0.80);    
    width: 2.25 vw;
    /* border: 1px solid black;
    border-radius: calc( var(--BorderRadiusFraction) * 3px);         */
    border: 2px solid var(--Gray20);
    border-radius: calc( var(--BorderRadiusFraction) * 2px);
    cursor: pointer;
    display: block;
    /* background-color: rgb(245, 245, 245); */
    background-color: transparent;    
    margin: 0 .25vw 0 0
  }
  .ProcessDataNumerically:hover{
    transform: scale(1.15);
    background-color: rgb(245, 245, 245);    
  }

  .ProcessDataAlphabetically{
    /* position: relative; */
    height: calc( var(--TopRibbonHeight) * 0.80);    
    width: 2.25 vw;
    /* border: 1px solid black;
    border-radius: calc( var(--BorderRadiusFraction) * 3px);         */
    border: 2px solid var(--Gray20);
    border-radius: calc( var(--BorderRadiusFraction) * 2px);
    cursor: pointer;
    display: block;
    /* background-color: rgb(245, 245, 245); */
    background-color: transparent;       
    margin: 0 .25vw 0 0
  }
  .ProcessDataAlphabetically:hover{
    transform: scale(1.15);
    background-color: rgb(245, 245, 245);    
  }

  .ButtonImageAlphaOrder,
  .ButtonImageChronOrder{
    height: calc( var(--TopRibbonHeight) * 0.75); 
    width: 2.5vw;
    border: none;
  }

  .ChooseHeaderForDateSorting,
  .ChooseHeaderForAlphaSorting{
    position: relative;
    height: calc( var(--TopRibbonHeight) * 0.80);    
    width: 2.25 vw;
    /* border: 1px solid black;
    border-radius: calc( var(--BorderRadiusFraction) * 3px); */
    border: 2px solid var(--Gray20);
    border-radius: calc( var(--BorderRadiusFraction) * 2px);
    cursor: pointer;
    display: block;
    /* background-color: rgb(245, 245, 245); */
    background-color: transparent;    
    margin: 0 .25vw 0 0;
    display: none;
  }
  .ChooseHeaderForDateSorting:hover,
  .ChooseHeaderForAlphaSorting:hover{
    transform: scale(1.15);
    background-color: rgb(245, 245, 245);    
  }

  .ButtonImageHeader{
    height: calc( var(--TopRibbonHeight) * 0.75); 
    width: 2.5vw;
    border: none;
  }

  .AlphaSortHeader,
  .DateSortHeader{
    display: none;
    flex: 0 40%;
    height: calc( var(--TopRibbonHeight) * 0.5);    
    font: 1.750vh var(--Font);
    font-weight: 450; 
    color: var(--Gray0);
    background-color: transparent;
    opacity: 0.25;
    flex-direction:column;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }  
  .DataHeaders{
    position: absolute;
    width: 18%;
    left: 37.5%;
    top: 10%;
    height: 75%;
    font: 1.75vh var(--Font);
    font-weight: 750;
    display: none;
    flex-direction: row;
    /* align-items: center;     */
    z-index: 1000;
    margin: 0 0 0 0;
    /* padding: 0.25% 0 0 0; */
    color: black;
    background-color: var(--Gray10);
    justify-content: space-between; /* text-align: center; */
    border: 2px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
  }
  .DataHeadersControl{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px 0 10px
  }
  .HeaderFieldChoiceLabel{
    position: inherit;
    font: 1.75vh var(--Font);
    font-weight: 750;
    display: inherit;
    text-align: center;
  }
  .DataHeadersContainer {
    /* position: absolute; */
    width: 99%;
    left: 0%;
    top: 5%;
    height: 95.5%;
    font: 1.75vh var(--Font);
    font-weight: 150;
    overflow-x: hidden;
    overflow-y: scroll;
    /* display: flex; */
    display: none;
    flex-direction: row;
    align-items: left;
    z-index: 1000;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    color: black;
    background-color: var(--Gray10);
    border: 2px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);    
  }
    /*#endregion*/

/* <!-- Header line styling: icon, title, slider, input data --> */
  /*#region*/
 
    .Body {
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      /* display: none; */
    }
  
    .TopRibbon {
      /* display: flex; */
      position: relative;
      display: none;
      flex-direction: row;
      height: var(--TopRibbonHeight);
      width: 100%;
      background: var(--Gray10);
      color: var(--TextColor);
      padding: 0;
      margin: 0;
      top: 0;      
    }
    .Footer{
      position: relative;
      display: none;
    }
  
    .Logo {
      height: 6vh;
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      top: 0;
      width: 4vw;
    }
  
    .img {
      height: 2.65vh;
      width: auto;
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      border: none;
      background-color: transparent;
      background: none;
    }
    .imgX2{
      height: 4vh;
      width: auto;
      margin: -1.25vh 0 0 0;
      padding: 0 0 0 0;
      border: none;
    }
    .imgpalette {
      height: 2.1vh;
      width: auto;
      margin: -.2vh 0 0 0;
      padding: .25vh;
      border: 1px solid var(--Gray50);
    }
    .BPlogoAndLibraryName{
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      /* color: var(--AlertColor); */
      color: var(--Gray0);
      background: var(--Gray10);
      left: 0vw;
      width: 35vw;
      font-size: 4.5vh;
      /* align-self: center;
      text-align: center; */
      z-index: 1100;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      box-sizing: border-box;
      overflow-x: hidden  ;
    }
    .GetBPfileFromTheCloud{
      background-color: transparent;
      position: absolute;
      left: 37.25vw;
      top: 0.5vh;
      height: calc( var(--TopRibbonHeight) * 0.8); 
      width: 2.5 vw;
      border: 2px solid var(--Gray20);
      border-radius: calc( var(--BorderRadiusFraction) * 2px);
      cursor: pointer;   
      z-index: 1000;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
    }
    .GetBPfileFromTheCloud:hover{
      transform: scale(1.15);
      background-color: rgb(245, 245, 245);
    }

    .GetBPfileFromTheCloudImage{
      background-color: transparent;      
      height: calc( var(--TopRibbonHeight) * 0.79); 
      top: 0.3vh;
      width: 3.25vw;
      border: none;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
    }
    
    .NumericSliderAndLabels{
      position: absolute;
      left: 53.25vw;
      top: calc( var(--TopRibbonHeight) * 0.325);
      display: none;
      flex-direction: row;
    }
    .NumberSliderLabel {
      font: 2vh var(--Font);
      font-weight: 500;
      text-align: right;
      height: calc( var(--TopRibbonHeight) * 0.5);  
      width: 12vw;
      color: var(--TextColor);
      padding: 0 .5vw 0 0;
      white-space: nowrap;      
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .NumberSlider {
      -webkit-appearance: none;
      appearance: none;
      width: 10vw;
      height: calc( var(--TopRibbonHeight) * 0.25);   
      transform: translate(0, 0.4vh);      
      border-radius: calc( var(--BorderRadiusFraction) * 3px);
      outline: none;
      opacity: .75;
      -webkit-transition: .1s;
      transition: opacity .1s;
      pointer-events: none;
    }
    .NumberSpanValue {
      font: 2vh var(--Font);
      font-weight: 500;
      height: calc( var(--TopRibbonHeight) * 0.25);  
      width: auto;
      padding: 0 0 0 .5vw;
    }

    .AlphaSliderAndLabels{
      position: absolute;
      left: 53.25vw;
      top: calc( var(--TopRibbonHeight) * 0.325);
      /* transform: translate(63.5vw, calc( var(--TopRibbonHeight) * 0.325)); */
      display: none;
      flex-direction: row;
    }
    .AlphaSliderLabel {
      font: 2vh var(--Font);
      font-weight: 500;
      text-align: right;
      height: calc( var(--TopRibbonHeight) * 0.5); 
      width: 12vw;
      /* background: var(--Gray10); */
      color: var(--TextColor);
      padding: 0 .5vw 0 0;
      white-space: nowrap;      
      overflow: hidden;
      text-overflow: ellipsis;
    }    
    .AlphaSlider {
      -webkit-appearance: none;
      appearance: none;
      width: 10vw;
      height: calc( var(--TopRibbonHeight) * 0.25);       
      transform: translate(0, 0.4vh);      
      border-radius: calc( var(--BorderRadiusFraction) * 3px);
      /* background: var(--Gray0); */
      outline: none;
      opacity: .75;
      -webkit-transition: .1s;
      transition: opacity .1s;
      pointer-events: none;
    }
    .AlphaSpanValue {
      font: 2vh var(--Font);
      font-weight: 500;
      height: calc( var(--TopRibbonHeight) * 0.25); 
      padding: 0 0 0 .5vw;
    }

    .AlphaSlider:hover,
    .NumberSlider:hover {
      opacity: 1;
    }
    .AlphaSlider::-webkit-slider-thumb,
    .NumberSlider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: calc( var(--TopRibbonHeight) * 0.25); 
      border-radius: calc( var(--BorderRadiusFraction) * 10%);
      background-color: var(--SliderThumbColor);
      /* background: black; */
      /* color: var(--SliderThumbColor); */
      cursor: pointer;
    }
    .AlphaSlider::-moz-range-thumb,
    .NumberSlider::-moz-range-thumb {
      width: 20px;
      height: calc( var(--TopRibbonHeight) * 0.25); 
      border-radius: calc( var(--BorderRadiusFraction) * 10%);
      background-color: var(--SliderThumbColor);
      /* color: var(--SliderThumbColor); */
      cursor: pointer;
      opacity: 1;
    }


    /*#endregion*/
  
/* <!-- Main Window and summary time line element styling --> */
  /*#region*/

    .MainTimeline{
      position: relative;
      font: 12px var(--Font);
      background: var(--Gray50);
      /* height: calc(99.9vh - var(--TopRibbonHeight) - var(--TimeLineMarkerHeight) - var(--PlaceMarkersHeight) - var(--NavigationHeight) - var(--UtilitiesHeight)); */
      height: calc(100vh - var(--TopRibbonHeight) - var(--TimeLineMarkerHeight) - var(--PlaceMarkersHeight) - var(--NavigationHeight) - var(--UtilitiesHeight));
      overflow-x: scroll;
      overflow-y: scroll;
      /* counter is initially set to -1 since element 1 of data set is user element field name and should not be counted as a display element */
      counter-reset: ElementNumber -1;
      /* fuss with a background */
      background: linear-gradient(rgba(0, 0, 0, var(--TimelineBackgroundFade)), rgba(0, 0, 0, var(--TimelineBackgroundFade))), var(--BackgroundImage);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      cursor:grabbing;
    }
    .MainTimeline::-webkit-scrollbar:horizontal{
      display: none;
    }  
    .MainTimeline::-webkit-scrollbar-thumb  {
      background-color:  var(--SliderThumbColor);
    }  
  
    .TimeLineElementBookmarked{
      position: absolute;
      transform: translate(100px, 140px);
      width: calc( var(--ElementCellScale)*25vw + var(--ThumbnailWidth)*5vw );
      min-height: 6.8vh;      
      font-size: calc( var(--ElementCellScale)*1.5vh);
      background-color: var(--TimeLineElementBookmarkedBackground);
      padding: 0px 0px 0px 5px;
      box-sizing: border-box;
      border: 3px solid var(--AlertColor);
      border-radius: calc( var(--BorderRadiusFraction) * 8px);
    }
    .ExpandElementButton {
      background-color: transparent;
      border: none;
      text-align: center;
      cursor: pointer;
      visibility: hidden;
      position: absolute;


    }
    .BookmarkElementButton {
      background-color: transparent;
      border: none;
      text-align: center;
      cursor: pointer;
      visibility: hidden;
      position: absolute;
    }    
    .TimeLineElementBookmarked:hover .ExpandElementButton { visibility: visible }
    .TimeLineElementBookmarked:hover .BookmarkElementButton { visibility: visible}

    .TimeLineElement {
      position: absolute;
      background-color: var(--Gray50);
      width: calc( var(--ElementCellScale)*25vw + var(--ThumbnailWidth)*5vw );
      /* min-height: 6.8vh; */
      min-height: 10.75vh;
      font-size: calc( var(--ElementCellScale)*1.5vh);
      visibility: visible;
      padding: 0px 0px 0px 5px;
      box-sizing: border-box;
      border: 3px solid transparent;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);
      background-color: var(--TimeElementBackgroundColor);
      color: black;
    }
    .TimeLineElement::before {
      content: '\25C6'; /* Unicode for a diamond mark (◆) */
      position: absolute;
      top: 0;
      left: 0;
      color: var(--EmeraldGreen);
      transform: translate(-59%, -55%); /* Adjust position so it's at the border edge */
      font-size: 2.0vh; /* Adjust size as needed */
      z-index: 1500;
    }
    .TimeLineElement:hover {
      border: 3px solid seashell;
      z-index: 10;
      pointer-events: all;
      cursor: pointer;
    }
    .TimeLineElement:hover .ExpandElementButton {visibility: visible}
    .TimeLineElement:hover .BookmarkElementButton {visibility: visible}
  
    .TimeLineElement.BorderOnSlow {
      border: 3px solid #6d6d6d;
      transition: 2s;
    }
    .TimeLineElement.BorderOffSlow {
      border: 3px solid transparent;
      transition: 2s;
    }
    .ElementNumber{
      padding: 0 0.5vw 0 0;
      font-size: 1.75vh;
      font-weight: 1000;
    }
    .ElementNumberAndTitleLineClamp{
      width: calc( var(--ElementCellScale)*23.5vw );      
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--LineClamp);
      line-clamp: var(--LineClamp);
      text-overflow: ellipsis;
      white-space: normal;
      color: var(--SummaryTextColor);
      font-size: 1.75vh;
      overflow-y: hidden;
    }
    .ElementNumberAndTitleNoLineClamp{
      width: calc( var(--ElementCellScale)*25vw );      
      display: block;
      white-space: normal;
      color: var(--SummaryTextColor);
      font-size: 1.75vh;
    }    
  
    .DescriptionSeparator {
      font-size: 5px;
      font-weight: bold;
      color: var(--SummaryTextColor);
    }
  
    .BriefBookTitle {
      font-style: normal;
      width: calc( var(--ElementCellScale)*23.5vw );
      font-size: 1.5vh;
      text-transform: uppercase;
      color: var(--SummaryTextColor);
      counter-increment: ElementNumber;
      overflow-y: hidden;
      margin: 0 0 .5vh 0;
    }
  
    .Author {
      width: calc( var(--ElementCellScale)*25vw );      
      font-style: normal;
      color: var(--SummaryTextColor);
      font-size: 1.75vh;
      font-weight: 750;
    }
  
    .BriefDescription {
      width: calc( var(--ElementCellScale)*25vw );      
      font-style: italic;
      font-size: 1.5vh;
      color: var(--SummaryTextColor);
    }
  
    .PublicationYear {
      width: calc( var(--ElementCellScale)*25vw );      
      font-style: normal;
      font-size: 1.5vh;
      font-weight: bold;
      color: var(--SummaryTextColor);
    }

    .ThumbnailImage{
      display: none;
      position: absolute;
      width: 5vw;
      height: 10vh;
      border: 1px solid seashell;
      background-color: transparent;
      object-fit: contain;
      /* max-width: 5vw;
      max-height: 10vh; */
      font: var(--Font);
      background-size: contain;    
      /* z-index: 1500; */
    }

    .ImageTest{
      display: hidden;
      position: absolute;
      object-fit: contain;
      max-width: 100%;
      max-height: 100%;
      font: var(--Font);
      /* background-size: contain;     */
      /* z-index: 10000; */
    }
    /*#endregion*/

/* <!-- Expanded data --> */
  /*#region*/

    .ExpandedElementControls{
    position: relative;
    height: 7%;
    display: flex;
    flex-direction: row;    }
    .BookMarkThisEntry{
      background-color: transparent;
      border: none;
      color: rgb(0, 255, 110);
      text-align: center;
      cursor: pointer;
      visibility: inherit;
      position: absolute;
      right: 6vw;
      height: 0.3vh;
      width: auto;
      z-index: 500;
    }
    .MakePDFOfExpandedData{
      background-color: transparent;
      border: none;
      color: rgb(0, 255, 110);
      text-align: center;
      cursor: pointer;
      visibility: inherit;
      position: absolute;
      right: 3.25vw;
      height: 0.3vh;
      width: auto;
      font-size: .3vh;
      font-weight: 900;
      z-index: 500
    }
    .ExpandedElementData {
      background-color: var(--FullDataBackgroundColor);
      width: 70vw;
      height: 80vh;
      position: fixed;
      left: 22vw;
      top: 6vh;
      border: 3px solid seashell;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);
      z-index: 50;
      visibility: hidden;
      padding: 1vh 1vw 0 1vw;
      box-sizing: border-box;
      color: seashell;    }
    .FullDataTitle{
      fill: black;
      font-size: x-large; 
      font-family: var(--Font);
      position: absolute;
      width: 50%    }
    .CloseElementButton {
      background-color: transparent;
      border: none;
      color: rgb(0, 255, 110);
      cursor: pointer;
      visibility: inherit;
      position: absolute;      
      right: 0.75vw;
      padding: 0 0 0 0;
      height: 35px;
      width: auto;
      font-size: 33px;
      font-weight: 900;    }
    .ExpandedElementContent{
      position: relative;
      visibility: inherit;
      height: 90%;
      overflow-x: hidden;
      overflow-y: scroll;    
      z-index: 750;}

    .ExpandedDescriptionSeparator,
    .ExpandedDescriptionSeparatorDescription1,
    .ExpandedDescriptionSeparatorDescription2,
    .ExpandedDescriptionSeparatorReferences,
    .ExpandedDescriptionSeparatorDigitalCopy,
    .ExpandedDescriptionSeparatorImage,
    .ExpandedDescriptionSeparatorSource,
    .ExpandedDescriptionSeparatorBlank{
      font-weight: bold;
      text-align: center;
    }
    .BibliographySeparatorBlank{
      display: block;
      visibility: inherit;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
    }


    /* .JPEGsource, */
    /* .AVIFsource, */
    /* .ExpandedDataImageAVIF, */
    .ExpandedDataImage {
      position: absolute;
      /* transform: translate(40vw, 3.5vh); */
      left: 40vw;
      top: 3.5vh;
      height: 46.5vh;
      width: 25vw;
      border: 1px solid seashell;
      object-fit: contain;
      max-width: 30vw;
      max-height: 50vh;
      font: var(--Font);
      background-size: contain;    
      z-index: 1500;
    }

    .ExpandedElementDataImageControl{
      position: absolute;
      display: flex;
      flex-direction: row;
      transform: translate(50vw, 0vh);
      width: 10vw;
      /* justify-content: space-between; */
    }
    .ImageControl{
      position: relative;
      background: transparent;
      border: none;
      outline: none;
      font-size: 20px;      
      font-weight: bold;
      width: 2.5vw;
      height: 2.5vh;
      align-items: center;
      /* padding: 0 1vw 0 1vw; */
    }
    .ImageControl:hover{ outline: thin dotted; opacity: 1.0}
    
    .ImageNumbers{
      position: relative;
      background: transparent;
      border: none;
      outline: none;
      font-size: 20px;      
      font-weight: bold;
      width: 2.5vw;
      height: 2.5vh;
      justify-content: center;
      align-items: center;
      padding: 0 1vw 0 1vw;      
    }

    .ImageControlButtonImages{
      background: transparent;
      border: 2px solid var(--Gray20);
      border-radius: calc( var(--BorderRadiusFraction) * 2px);
      padding: 0 0 0 0;
      height: 2.5vh;
      width: auto;
      cursor: pointer;
      z-index: 10;
      outline:none;
      object-fit: contain;
    }
    @media screen and (height <= 900px) {
      .ImageControlButtonImages{
        border: 1px solid var(--Gray20);
        padding: 0 0 0 0;
        object-fit: contain;    
      }
    }
    .ImageControlButtonImages:hover{
      background: var(--Gray0);
      transform: scale(1.15);
      padding: 0 0 0 0;
    }
    
    .BP_ImageCaption{
      position: absolute;
      left: 40vw;
      top: 50vh;
      display: block;
      width: 25vw;
      height: 5vh;
      /* object-fit: contain; */
      max-width: 30vw;
      /* max-height: 20vh; */
      font: var(--Font);
      font-size: 2.0vh;      
      text-align: left;
      /* background-size: contain;     */
      overflow-y: scroll;
    }
    .ExpandedDataImageFullScreenContainer{
      position: absolute;
      top: 0;
      left: 0;
      height: 99.75vh;
      width: 99.75vw;
      border: 1px solid seashell;
      object-fit: contain;
      font: var(--Font);
      background-size: contain;    
      display: none;
      background-color: seashell;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      z-index: 1500;      
    }
    .ExpandedDataImageFullScreen{
      position: absolute;
      top: 0;
      left: 0;
      height: 95%;
      width: 99%;
      border: 3px solid black;
      object-fit: contain;
      display: none;
      font: var(--Font);
      opacity: 1.0;
      padding: 0 0 0 0;
      margin: 0 0 0 0;      
      z-index: 1550;
    }
    .ExpandedDataImageCaption{
      position: absolute;
      bottom: 0;
      left: 0;
      height: 4.5%;
      width: 100%;
      display: none;
      font: var(--Font);
      font-size: 2vh;
      vertical-align: middle;
      text-align: center;
      padding: 5px 0 0 0;
      background-size: contain;    
      z-index: 1500;
      padding: 0 0 0 0;
      margin: 0 0 0 0;      
      overflow-y: scroll;
    }
    .CloseExpandImageToFullScreen{
      position: absolute;
      top: 0.5%;
      right: 1.0%;
      text-align: center;
      background: transparent;
      width: auto;
      height: auto;
      border: none;
      border-radius: calc( var(--BorderRadiusFraction) * 2px);    
      outline: none;
      cursor: pointer;      
      padding: 0 0 0 0;
      z-index: 2000;      
      display: none;
    }

    .BP_ExpandedDataHalfWidth{
      visibility: inherit;
      font: var(--Font);
      font-size: 2.0vh;      
      width: 30vw;
      box-sizing: border-box;
      padding-left: 5vw
    }
    .BP_ExpandedDataHalfWidthNoIndent{
      visibility: inherit;
      font: var(--Font);
      font-size: 2.0vh;      
      width: 30vw;
      box-sizing: border-box;
      overflow-wrap: break-word;
    }
    .BP_ExpandedDataFullWidthOneColumn{
      visibility: inherit;
      font: var(--Font);          
      font-size: 2.0vh;      
    }
    .BP_ExpandedDataFullWidthTwoColumns{
      column-count: var(--ExpandedDataNumOfCols);
      column-rule: 1px solid lightblue;
      visibility: inherit;
      /* font-style: normal; */
      font: var(--Font);       
      font-size: 2.0vh;      
    }
    .BP_ExpandedDataImages{
      display: none;
      visibility: hidden;
    }
    .HTTPlink{
      color: var(--SummaryTextColor);
      text-decoration: underline;
      font-size: 2.0vh;      
    }    
    .HTTPlink:link{
      color: var(--SummaryTextColor);
      text-decoration: underline;
      font-size: 2.0vh;      
    }
    .HTTPlink:hover{
      /* color: var(--SummaryTextColor); */
      color: rgb(0, 0, 0);
      text-decoration: none;
      font-size: 2.0vh;      
    }
    
    .WikipediaSearch,
    .ExternalSearchLink{
      /* position: absolute; */
      display: inline;
      width: fit-content;
      font-size: 1.5vh;      
      border-radius: calc( var(--BorderRadiusFraction) * 4px);
      border: 2px solid var(--AlertColor);
      margin-left: 10px;
    }
    .WikipediaSearch{
      display: none;
      padding: 0 0 0 0;
      margin: 0.75vh 0 0 0;
      background-color: transparent;
      color: white;
      cursor: pointer;
    }

    .DigitalCopyLink{
      position: absolute;
      display: inline;
      width: 10vw;
      font-size: 1.5vh;      
      border-radius: calc( var(--BorderRadiusFraction) * 4px);
      border: 2px solid var(--AlertColor);
      margin-left: 10px;
      text-align: center;
      background: transparent;
      color: seashell;
    }
      /*#endregion*/
  
/* <!-- Time line markers styling --> */
  /*#region*/
  
      .TimeLineMarker {
        position: relative;
        height: var(--TimeLineMarkerHeight);
        background: var(--Gray10);
        font-weight: 750;
        overflow-x: hidden;
        overflow-y: hidden;
        user-select: none;
        border-bottom: 2px solid black;
        box-sizing: border-box;
      }
    
      .UnitOnTimeLineMarker {
        font-family: var(--Font);
        /* font-weight: bold; */
        height: 2.5vh;
        position: absolute;
        overflow-x: hidden;
        overflow-y: hidden;
        color: var(--DarkTextColor);
      }
    /*#endregion*/
    
/* <!-- Navigation --> */
  /*#region*/
  
      .PlaceMarkers {
        position: relative;
        height: 2vh;
        background: var(--Gray50);
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        overflow-x: hidden;
        overflow-y: hidden;
      }
    
      .PlaceMarkerElement {
        position: absolute;
        color: var(--AlertColor);
        height: 2vh;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        box-sizing: border-box;
        font-size: 2vh;
        opacity: 0.3;
        z-index: 0;
        font-weight: 500;
        user-select: none;
      }
      .PlaceMarkerElementBoundary {
        position: absolute;
        color: rgb(255, 60, 0);
        height: 1.75vh;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        box-sizing: border-box;
        font-size: 1.75vh;
        opacity: 1;
        z-index: 0;
        font-weight: 1000;
        user-select: none;
      }
    
      .Navigate {
        position: relative;
        height: var(--NavigationHeight);
        background: var(--Gray10);
        color: var(--DarkTextColor);
        box-sizing: border-box;
        z-index: 0;
        width: 100vw;
        overflow-x: hidden;
        overflow-y: hidden;
        user-select: none;
      }
    
      .YearOnNavigateMarker {
        font-family: var(--Font);      
        height: var(--NavigationHeight);
        font-weight: 750;
        position: absolute;
        overflow-x: hidden;
        overflow-y: hidden;
        user-select: none;        
      }
    
      .NavigateWindowSlider {
        --SliderThumbWidth: "25px";
        --SliderThumbHeight: "25px";
        position: absolute;
        width: 99.98vw;
        -webkit-appearance: none;
        appearance: none;
        height: 10px;
        bottom: 0.3vh;
        border-radius: calc( var(--BorderRadiusFraction) * 10px);
        background: var(--Gray00);
        outline: none;
        opacity: 1.0;
        z-index: 10;
      }
    
      .NavigateWindowSlider::-webkit-slider-thumb {
        -webkit-appearance: none;  
        appearance: none;
        width: var(--SliderThumbWidth);
        height: var(--SliderThumbHeight);
        background: var(--SliderThumbColor);
        color: var(--Gray60);
        cursor: ew-resize;
      }
      .NavigateWindowSlider::-webkit-slider-thumb:hover{
        background: var(--SliderThumbColor);
      }
    
      .NavigateWindowSlider::-moz-range-thumb {
        height: 15px;
        background: var(--SliderThumbColor);
        cursor: ew-resize;
      }
    /*#endregion*/
    
/* <!-- Utilities --> */
  /*#region*/
  
      .Utilities {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 4vh;
        background: var(--Gray10);
      }
    /*#endregion*/
    
/* <!-- General Help --> */
  /*#region*/
  
    .Help{
      position: fixed;
      top: 2%;
      right: 15%;
      font: 1.5vh var(--Font);
      font-weight: 150;
      visibility: hidden;
      background-blend-mode: normal;
      background-color: var(--Gray10);
      width: 60%;
      height: 96%;
      padding: 0px 20px 0px 5px;
      box-sizing: border-box;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);
      border: 3px solid seashell;
      opacity: 1;
      z-index: 1500;
      resize: both;
    }
    
    .HelpControls{
      display: flex;
      flex-direction: row;
      height: 7%;
      vertical-align: middle;
      visibility: inherit;   
      align-items: center;   
    }
    
    #HelpDrag{
      /* top: 5px; */
      width: 25 px;
      height: 25 px;
      cursor:grabbing;
    }
    .HelpTitle{
      visibility: inherit;
      font: 3vh var(--Font);
      font-weight: 150;
      padding: 0 0 0 1vw;
    }
      /* help scroll bar is wider than others. allows the resize tab at the bottom to be more visilble */
      .Help::-webkit-scrollbar {
        width: 10px;
        color: var(--AlertColor)
      }
      .Help::-webkit-scrollbar-track {
        /* Track */
        border-radius: calc( var(--BorderRadiusFraction) * 5px);
        opacity: .85
      }
      .Help::-webkit-scrollbar-track-piece{
        background: var(--Gray10);
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);       
      }
      .Help::-webkit-scrollbar-thumb {
        background: var(--Gray10);
        border-radius: calc( var(--BorderRadiusFraction) * 5px);
        opacity: 1;
        background: var(--AlertColor);
      }
      .Help::-webkit-scrollbar-thumb:hover {
        background: var(--SliderThumbColor);
      }
    .HelpContent{
      overflow-y: scroll;
      overflow-x: hidden;
      visibility: inherit;
      position: relative;
      height: 90%;
    }
    .HelpToC{
      right: 50px;
      height: 25px;
      font-size: 20px;  
      padding: 0 0 0 35%;
    }
    .CloseHelpButton{
      background-color: transparent;
      border: none;
      text-align: center;
      cursor: pointer;
      visibility: inherit;
      position: absolute;
      right: 5px;
      height: 25px;
      font-size: 33px;
      outline: none;
      padding: 0 0 0 0;
    }

    .CloseHelpButton:hover{
      transform: scale(1.15);
    }
  
    .HelpDocWindow{
      overflow-y: scroll;
      height: 90%
    }
    .DocFrame{
      width: 99%;
      height: 99%
    }
      /*#endregion*/
  
/* <!-- BookmarkManagement --> */
  /*#region*/
      
      .BookmarkManagement {
        background-color: var(--Gray10);
        width: calc(var(--PopUpWindowWidth)*0.5);
        height: 60vh;
        position: fixed;
        right: calc((100vw - var(--PopUpWindowWidth)));
        top: 10vh;
        border: 3px solid seashell;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        z-index: 20;
        font: 3vh var(--Font);
        font-weight: 150;
        visibility: hidden;
        padding-top: 1vh;
        box-sizing: border-box;
        color: var(--Gray60);
      }
      .BookmarkControls{
        width: calc(var(--PopUpWindowWidth)*0.475);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* align-items:flex-end; */
        gap: 0.25vw;
      }
      #BookmarkManagementDrag{
        width: 25 px;
        height: 25 px;
        cursor: grabbing;
      }
      .BookmarkTitle{
        padding: 0 0 0 25px;
        font: 3vh var(--Font);
        font-weight: 150;
      }
      .SaveHelpCloseBookmark{
        width: calc(var(--PopUpWindowWidth)*0.45);
        display: flex;
        flex-direction: row;
        z-index: 100;
        justify-content: flex-end; 
        gap: .3vw;
        margin-left: auto;        
      }
      .SaveBookmarkListButton,
      .BookmarkHelpButton,
      .ClearAllBookmarksButton,
      .CloseBookmarksButton {
        text-align: center;
        background: transparent;
        width: auto;
        height: auto;
        border: none;
        border-radius: calc( var(--BorderRadiusFraction) * 2px);    
        outline: none;
        cursor: pointer;      
        padding: 0 0 0 0;
      }
      .ClearAllBookmarksButton:hover,
      .SaveBookmarkListButton:hover,
      .BookmarkHelpButton:hover,
      .CloseBookmarksButton:hover{
        transform: scale(1.15);
       }    

      .CurrentBookmark {
        position: relative;
        background-color: var(--Gray20);
        color: white; /*var(--Gray0);*/
        width: calc(var(--PopUpWindowWidth)*0.425);
        min-height: 5vh;
        font: 1.5vh var(--Font);
        font-weight: 250;
        margin: 0 0 3px calc(var(--PopUpWindowWidth)*0.00625);
        box-sizing: border-box;
        border: 2px solid var(--Gray50);
        border-radius: calc( var(--BorderRadiusFraction) * 4px);
        outline:none;
      }
    
      .BookmarkContainer {
        position: absolute;
        visibility: inherit;
        width: calc(var(--PopUpWindowWidth)*0.475);
        height: 50vh;
        overflow-x: hidden;
        overflow-y: scroll;
        display: flexbox;
      }
    
      .BookmarkContainer::-webkit-scrollbar {
        width: 10px;
        color: var(--AlertColor)
      }
      .BookmarkContainer::-webkit-scrollbar-track {
        border-radius: calc( var(--BorderRadiusFraction) * 5px);
      }
      .BookmarkContainer::-webkit-scrollbar-track-piece{
        background: var(--Gray10);
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);       
      }
      .BookmarkContainer::-webkit-scrollbar-thumb {
        background: var(--Gray10);
        border-radius: calc( var(--BorderRadiusFraction) * 5px);
        opacity: 1;
        background: var(--AlertColor);
      }
      .BookmarkContainer::-webkit-scrollbar-thumb:hover {
        background: var(--SliderThumbColor);
      }
    
      .RemoveBookmarkButton {
        background-color: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 2vw;
        height: auto;
        z-index: 10;
        outline:none;
        /* max-width: 5ww; */
        position:absolute;
        right: -2vw;
        top: -0.125vh;
      }

      .ShowBookmarks {
        outline:none;
        width: auto;
        background: transparent;
        border: black;
        outline:none;
      }

      /* seek a bookmark  */
      .BookmarkSeeker {
        /* position: fixed; */
        /* left: 5vw; */
        display: flex;
        align-items: center;
        flex-direction: row;
        background: transparent;
        height: 3vh;
        /* width: 2vw; */
        border: none;
        border-color: transparent;
        outline:none;
      }
      .BookmarkSeek {
        display: flex;
        align-items: center;
        flex-direction: row;
        background: transparent;
        height: 3.5vh;
        width: 2vw;
        border: none;
        border-color: transparent;
        outline:none;
      }
      .BookmarkSeekBackward,
      .BookmarkSeekForward {
        background: transparent;
        width: 2vw;
        border: none;
        border-color: transparent;
        cursor: default;
        outline:none;
      }
      .BookmarkSeekBackwardButtonImage {
        background: transparent;
        border: 2px solid var(--Gray20);
        border-radius: calc( var(--BorderRadiusFraction) * 2px);          
        height: 3vh;
        width: 1.5vw;
        z-index: 10;
        opacity: 0.25;
      }
      .BookmarkSeekForwardButtonImage {
        background: transparent;
        border: 2px solid var(--Gray20);
        border-radius: calc( var(--BorderRadiusFraction) * 2px);          
        height: 3vh;
        width: 1.5vw;
        z-index: 10;
        opacity: 0.25;
      }
      .BookmarkSeekBackwardButtonImage:hover,
      .BookmarkSeekForwardButtonImage:hover{      
        background: var(--Gray0);  
        transform: scale(1.15);
      }    
      /*#endregion*/
  
/* <!-- SearchManagement --> */
  /*#region*/
  
      .Search {
        background: transparent;
        border: none;
        outline:none;
        
      }
      .SearchManagement {
        background-color: var(--Gray10);
        width: var(--PopUpWindowWidth);
        height: 70vh;
        position: absolute;
        left: calc( (100vw - var(--PopUpWindowWidth)*1.3333)/2);
        top: 10vh;
        border: 3px solid seashell;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        z-index: 20;
        font: 3vh var(--Font);
        font-weight: 150;
        visibility: hidden;
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        color: var(--Gray60);
        outline:none;
        /* padding: 0 0 0 0; */
        margin: 0 0 0 0;        
      }

      .SearchControls{
        display: flex;
        flex-direction: row;
        width: calc(var(--PopUpWindowWidth) * 0.975);
        align-items: center;
        height: 5vh;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        z-index: 500;
      }
      #SearchManagementDrag{
        width: 2vw;
        height: 2vh;
        cursor: grabbing;
      }
      .SearchTitle{
        /* padding: 0 0 0 2vw; */
        font: 3vh var(--Font);
        font-weight: 150;
      }
      .NumberOfSearchResults{
        background-color: transparent;
        border: none;
        margin: 0 0 0 2vw;
        width: 15vw;
        font-size: 2vh;
        font-weight: 50;
        outline:none;
      }

      .ClearAllSearchHitsButton,
      .SaveSearchListButton,
      .BookmarkAllSearchHitsButton {
        background-color: transparent;
        width: auto;
        border: none;
        cursor: pointer;
        visibility: inherit;
        outline:none;
        padding: 0;
        margin: 0 0 0 0.25vw;
        /* margin: 0 0.25vw 0 0; */
      }
  
      .SearchSaveHelpCloseSearch{
        margin-left: auto;
        height: 5vh;
        display: flex;
        flex-direction: row;
        z-index: 100;
        justify-content: flex-end; 
        gap: .3vw;
        margin-left: auto;        
        padding: 0 0 0 0;
      }

      .NoPointEvents{
        pointer-events: none;          
      }

      .StartSearchButton,
      .ClearAllSearchFieldsButton,
      .CloseSearchManagementButton,
      .SearchHelpButton{
        background: transparent;  
        width: auto;
        height: auto;
        border: none;
        outline: none;
        cursor: pointer;
        margin: 0;
        padding: 0;
      }      
  
      .BookSearchButtonImage:hover,
      .BookmarkAllSearchHitsButton:hover,
      .ClearAllSearchHitsButton:hover,
      .StartSearchButton:hover,
      .SaveSearchListButton:hover,
      .ClearAllSearchFieldsButton:hover,
      .SearchHelpButton:hover,
      .RemoveSearchHitButton:hover,
      .ShowSearchFieldsHitButton:hover,
      .ShowSearchFullElementButton:hover,
    	.CloseSearchManagementButton:hover {
        transform: scale(1.15);        
      }

      .SearchResultsContainer {
        position: absolute;
        visibility: inherit;
        /* width: calc( var(--SearchEntryWidth) + 13vw ); */
        width: calc( var(--SearchEntryWidth) * 1.05);
        height: 60vh;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      .CurrentSearchHit {
        position: relative;
        background-color: gray;
        color: var(--Gray0);
        width: calc(var(--SearchEntryWidth) * 0.7);
        min-height: 3vh;
        font: 1.5vh var(--Font);
        font-weight: 150;
        padding: 0px .2vw 0 .1vh;
        margin: .2vw;
        box-sizing: border-box;
        border: 2px solid var(--Gray50);
        border-radius: calc( var(--BorderRadiusFraction) * 4px);
      }

      .CurrentSearchHitButtons{
        width: 5vw;
        height: 2.5vh;
        display: flex;
        flex-direction: row;
        column-gap: 0.25vw;
        position: absolute;
        right: -6vw;
        top: -.1vh;        
        z-index: 100;
      }

      .ShowSearchFullElementButton,
      .ShowSearchFieldsHitButton,
      .RemoveSearchHitButton,
      .BookmarkSearchHitButton {
        background-color: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        padding: 0 0 0 0;
        height: 2vh;
        width: auto;
        z-index: 10;
        outline:none;
      }      

      .SearchValueMapButton{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 1.25vw;
        height: auto;
        outline:none;
      }

      .SearchValueMapButtonImage{
        background-color: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 1.25vw;
        height: auto;
        outline:none;
        display: inline-block;
      } 
    
      .GetSearchListButton{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 1.25vw;
        height: auto;
        outline:none;
      }
      .GetSearchListButtonImage{
        background-color: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 1.25vw;
        height: auto;
        outline:none;
        display: inline-block;
      }
      .AvailableSearchLists{
        background-color: var(--Gray15);
        width: calc( var(--PopUpWindowWidth)/3);
        height: 70vh;
        position: absolute;
        left: calc( (100vw - var(--PopUpWindowWidth)*1.3333)/2 + var(--PopUpWindowWidth) );      
        right: calc();
        top: 10vh;
        border: 3px solid seashell;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        z-index: 20;
        font: 2vh var(--Font);
        font-weight: 150;
        visibility: hidden;
        padding-right: 10px;
        box-sizing: border-box;
        color: seashell;
        outline:none;
        overflow-y: scroll;      
      }
      .AvailableSearchListsControl{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 7.25vh;
        width: 100%;
        position: sticky;
        top: 0;
        left: 0;
        background-color: var(--Gray15);
        padding: 0.25vh 0 0 0;
        overflow-wrap: normal;
      }
      #AvailableSearchListsDrag{
        width: 25 px;
        height: 25 px;
        cursor:grabbing;
      }
      .CloseAvailableSearchLists{
        position: relative;
        background-color: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: auto;
        height: auto;
        right: 5%;
        outline:none;      
        padding: 0 0 0 0;
      }
      .SearchListAlphabetJump{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: center;
        font-size: 1.75vh;
        font-weight: 750;
        line-height: 2vh;
        width: 90%;
        padding: 0 0 0 .5vw;
        background-color: transparent;
        color: white;
        cursor: pointer;
        overflow-wrap: normal;
      }
      .SearchListNavLetter{
        height: 1.5vh;
        width:  1.5vw;
      }

      .SearchFields {
        position: absolute;
        visibility: inherit;
        width: calc(var(--SearchEntryWidth) * 0.9 );
        left: calc(var(--SearchEntryWidth) + 2.5vw); 
        top: 4.75vh;
        height: 60vh;
        font: 2vh var(--Font);
        font-weight: 150;
      }
      .SearchFieldsContainer {
        position: relative;
        width: calc(var(--SearchEntryWidth) - 3.75vw);
        left: calc(var(--SearchEntryWidth) + 2vw);
        top: 0.5vh;
        height: 60vh;
        font: 1.75vh var(--Font);
        font-weight: 150;
        visibility: inherit;
        overflow-x: hidden;
        overflow-y: scroll;
        display: flex;
        flex-direction: row;
        align-items: left;
      }
       /* styling rows in search field table */
      .SearchTable{
        border-collapse: collapse;    
        background-color: transparent;
      }
      tr {
      height: 0.25vh;  
      }
      tr:hover {
        background-color: var(--Gray15);
      }

      .ASearchValue{
        width: calc(var(--SearchEntryWidth) * 0.35);
        /* overflow-x: scroll; */
      }
      
      /*#endregion*/
    
/* <!-- Filter --> */
  /*#region*/
      .Filter {
        background: transparent;
        border: none;
        outline:none;
        width: auto;
      }    
      .FilterManagement {
        background-color: var(--Gray10);
        width: calc(var(--PopUpWindowWidth)*0.5);
        height: 70vh;
        position: absolute;
        left: calc( (100vw - var(--PopUpWindowWidth)*(.3333))/2);      
        top: 10vh;
        border: 3px solid seashell;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        z-index: 20;
        font: 2vh var(--Font);
        font-weight: 150;
        visibility: hidden;
        padding: 1vh 1vw 0 1vw;
        box-sizing: border-box;
        color: var(--Gray60);
        outline:none;
      }

      .FilterControls{
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 5vh;
        justify-content: flex-end; 
        gap: .3vw;
        margin-left: auto;
      }    
      .FilterTitle{
        /* padding: 0 0 0 20px; */
        font: 3vh var(--Font);
        font-weight: 150;
      }      
      .NumberOfFilterResults{
        margin: 0 0 0 1vw;
        width: 7vw;
      }
      .FilterProgress{
        background-color: transparent;
        border: none;
        height: 40px;
        /* left: 110px; */
        width: auto;
        outline:none;
        z-index: 100;
      }
      .FilterTable{
        /* cellpadding: 0; */
        /* cellspacing: 5px; */
        /* border-collapse: collapse;     */
        background-color: transparent;
      }
      .FilterFieldsContainer {
        width: calc(var(--PopUpWindowWidth)*0.4625);
        height: 60vh;
        font: 1.75vh var(--Font);
        font-weight: 150;
        visibility: inherit;
        overflow-x: hidden;
        overflow-y: scroll;
        display: flex;
        flex-direction: row;
        align-items: left;
      }    
      .FilterFields {
        visibility: inherit;
        font: 2vh var(--Font);
        font-weight: 150;
      }

      .GetFilterListButton,
      .FilterValueMapButton{        
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 1.25vw;
        height: auto;
        outline:none;
      }

      .GetFilterListButtonImage,
      .FilterValueMapButtonImage{
        background-color: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 1.25vw;
        height: auto;
        outline:none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        display: inline-block;
      } 
  
      .FileterButtonsContainer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-left: auto;
      }
      .StartFilterButton,
      .EndFilterButton,
      .ClearAllFilterFieldsButton,
      .FilterHelpButton,
      .CloseFilterManagementButton {
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline:none;
        margin: 0 0 0 0;
        padding: 0 .5vh 0 0;
      }    
      .StartFilterButton:disabled {
        opacity: 0.35;
        pointer-events: none;
      }

      .StartFilterButton:hover,
      .EndFilterButton:hover,
      .ClearAllFilterFieldsButton:hover,
      .FilterHelpButton:hover,
      .CloseFilterManagementButton:hover{
        transform: scale(1.15);        
      }

      .ClearAllFilterFieldsButtonImage {
        width: 2vw;
        height: auto;
        outline:none;
      }
      /*#endregion*/
  
/* <!-- Data Upload ..> */
  /*#region*/
      .DataUploadWindow{
        background-color: var(--Gray10);
        width: calc(var(--PopUpWindowWidth)*0.5);
        height: 50vh;
        position: absolute;
        left: calc( (100vw - var(--PopUpWindowWidth)*(.3333))/2);      
        top: 30vh;
        border: 3px solid seashell;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        z-index: 1500;
        font: 2vh var(--Font);
        font-weight: 150;
        visibility: visible;
        padding: 1vh 1vw 0 1vw;
        box-sizing: border-box;
        color: var(--Gray60);
        outline:none;        
        display: none;
      }
    /*#endregion*/

/* <!-- WalkThrough --> */
  /*#region*/      
    .WalkThrough{
      background: transparent;
      border: none;
      outline:none;
      width: auto;
    }
    .WalkThroughControl{
      position: fixed;
      width: 14vw;
      height: 12vh;
      background-color: var(--FullDataBackgroundColor);
      left: 7vw;   
      bottom: 14vh;
      border: 3px solid seashell;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);
      display: none;
      /* flex-direction: row; */
      box-sizing: border-box;
      flex-wrap: wrap;
      /* justify-content: space-between; */
      /* padding: 1vh 0 0 0; */
      z-index: 1500;
    }
    #SlowWalk, #WalkThroughPauseTime, #FastWalk, #PauseWalk, #StopWalk{
      flex: 1 1 20%; /* Each item takes up 20% of the row */
    }
    #WalkBackward, #WalkingDirectionLabel, #WalkForward {
      flex: 1 1 33.33%; /* Each item in the second row takes up 33.33% */
    }
    #WalkBackward, #WalkForward{
      flex: 1 1 25%; 
    }
    #WalkingDirectionLabel{
      flex: 1 1 35%;       
    }

    .WalkDirection{
      background: transparent;
      border: none;
      outline:none;
      /* width: calc(14vw / 3); */
    }
    .WalkingDirectionLabel{
      position: relative;
      text-align: center;
      top: 15%;
      background: transparent;
      border: none;
      outline:none;
      /* width: calc(14vw / 3); */
    }
   
    .SlowWalk,
    .FastWalk,
    .PauseWalk,
    .StopWalk,
    .WalkThroughPauseTime{
      background: transparent;
      border: none;
      outline:none;
      width: calc(14vw / 5.2);
      max-width: calc(14vw / 5.2);
      text-align: center;
      padding: 0 0 0 0;
    }

    /*#endregion*/

/* <!-- CollectorInfo --> */
  /*#region*/          
    .CollectorInfoWindow{
      position: fixed;
      top: 2%;
      right: 15%;
      font: 3vh var(--Font);
      font-weight: 250;
      background-blend-mode: normal;
      background-color: var(--Gray10);
      width: 50vw;
      height: 85vh;
      padding: 0px 20px 0px 5px;
      box-sizing: border-box;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);
      border: 3px solid seashell;
      opacity: 1;
      z-index: 1500;
      resize: both;
      display: none;
    }    
    .CloseCollectorInfoWindow{
      position: absolute;
      top: 0.1%;
      right: 2.0%;      
      background-color: transparent;  
      background: transparent;
      border: none;
      cursor: pointer;
      visibility: inherit;
      width: 25px;
      height: 25px;
      outline:none;
    }
    .CloseCollectorInfoWindow:hover{
      transform: scale(1.15);
    }

  .CollectorInfo{
      background: transparent;
      border: none;
      outline:none;
      width: auto;
    }    

    /*#endregion*/

/* <!-- spreadsheet --> */
  /*#region*/
      .CSVspreadsheet{
        position: absolute;
        top: 6vh;
        left: 0%;
        width: 100%;
        height: 94vh;
        /* height: 82vh; */
        display: none;
        z-index: 250;
        padding: 0, 0, 0, 0;
        margin: 0, 0, 0, 0;
      }
      .CSVspreadsheetControls{
        background-color: var(--Gray10);
        display: flex;
        flex-direction: row;
        justify-content: right;
        align-items: center;
        gap: 0.25vw; 
        height: 5%;
        width: 100%;
        padding: 0 0 0.75vh 0;
        margin: 0 0 0 0;        
      }
      .CSVspreadsheetDisplay{
        position: relative;
        height: 90%;
        width: 100%;
        padding: 0 0 0 0;
        margin: 0 0 0 0;        
      }

      .AddToSpreadsheetButton,
      .CheckImagesButton,
      .SaveSpreadsheetCheckingButton,
      .CheckSpreadsheetButton,
      .CheckCollationButton,
      .SaveCSVFileDataViewingButton,
      .HelpCSVFileCheckingButton,
      .CloseCSVspreadsheetButton{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 25px;
        height: 3vh;
        outline:none;
        padding: 0 0 0 0;
        padding: 0 0 0 0;
        margin: 0 15px 0 0;

      }
      .AddToSpreadsheetButton:hover,
      .CheckImagesButton:hover,
      .SaveSpreadsheetCheckingButton:hover,
      .CheckSpreadsheetButton:hover,
      .CheckCollationButton:hover,
      .SaveCSVFileDataViewingButton:hover,
      .HelpCSVFileCheckingButton:hover,
      .CloseCSVspreadsheetButton:hover{
        transform: scale(1.15);
      }

      .ColorCodingCSVProblems{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: default;
        margin-right: auto;
        padding: 0 0 0 10px;
        visibility: visible;
      }
      .ColorCodingHeaders{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: default;
        margin-right: auto;
        padding: 0 0 0 10px;
        visibility: visible;
      }      
      .MoveToCellButton{
        background-color: transparent;
        background: transparent;
        width: 25px;
        height: 25px;
        border: none;
        cursor: pointer;
        vertical-align: middle;
        visibility: visible;
        z-index: 1100;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
      .MoveToCellButton:hover{
        /* background: var(--Gray0); */
        transform: scale(1.15);
      }
      .MoveToCellButton:disabled{
      opacity: 0.35;
      pointer-events: none;
      }
      
      /*#endregion*/

/* <!-- Map viewing and functions--> */    
  /*#region*/
      .Map{
        position: absolute;
        top: 6vh;
        left: 0%;
        width: 100%;
        height: 94vh;
        /* height: 82vh; */
        display: none;
        z-index: 0;
        padding: 0, 0, 0, 0;
        margin: 0, 0, 0, 0;
      }

      .OpenCategories,
      .OpenContext,
      .OpenMap{
        position: absolute;
        background-color: transparent;        
        left: 81.5vw;
        top: 0.5vh;
        height: calc( var(--TopRibbonHeight) * 0.80); 
        width:  auto;
        border: 2px solid var(--Gray20);
        border-radius: calc( var(--BorderRadiusFraction) * 2px);
        cursor: pointer;   
        display: block;
        opacity: 0.5;
        pointer-events: default;
      }
      .OpenContext{
        left: 85.5vw;
        opacity: 1.0;
        /* display: none; */
      }
      .OpenCategories{
        left: 89.5vw;
        opacity: 1.0;
        display: none;
      }

      .OpenCategories:hover,
      .OpenContext:hover,
      .OpenMap:hover{
        transform: scale(1.15);
        background-color: rgb(245, 245, 245);        
      }

    
      .OpenMapButtonImage{
        border: none;
        width: calc( var(--TopRibbonHeight) * 0.75); 
        height: calc( var(--TopRibbonHeight) * 0.75); 
        /* margin: calc( var(--TopRibbonHeight) * 0.05) 0 0 0; */
      }
      .MapControls{
        background-color: var(--Gray10);
        display: flex;
        flex-direction: row;
        justify-content: right;
        align-items: center;
        height: 5vh;
        width: 100vw;
        padding: 0 0 0 0;
        margin: 0 0 0 0;        
        z-index: 2500;
        border-top: 2px solid black;
        box-sizing: border-box;        
      }
      .NameOfLocationData{
        background-color: transparent;
        background: transparent;
        border: none;
        font: 2vh var(--Font);
        font-weight: 650;
      }
        .MapZoomAllButton,
        .MapBackgroundButton,
        .GoogleEarthButton,
        .CloseMapButton{
          background-color: transparent;
          background: transparent;
          border: none;
          cursor: pointer;
          visibility: inherit;
          width: 3vw;
          height: 4vh;
          outline:none;
          /* padding: 0 1vw 0 0; */
          /* margin: 0 15px 15px 5px; */
        }
        .MapZoomAllButton:hover,
        .MapBackgroundButton:hover,
        .GoogleEarthButton:hover,
        .CloseMaoButton:hover{
          transform: scale(1.15);
        }

      .MapDisplay{
        position: relative;
        height: 90%;
        width: 100%;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }

      .leaflet-marker-icon {
        opacity: 0.60; /* Adjust the opacity level between 0 (fully transparent) and 1 (fully opaque) */
      }
      .text-icon{
        background-color: white;
        color: blue;
        border: 1px solid black;
        border-radius: calc( var(--BorderRadiusFraction) * 5px);   
        opacity: 0.75;
      }
      .custom-marker .marker-container {
        position: relative;
        width: 30px;
        height: 30px;
      }
      .custom-marker img {
        width: auto;   /* Forces image to fit the container's width */
        height: 100%;  /* Forces image to fit the container's height */
        object-fit: cover;  /* Maintains aspect ratio while filling container */
        background: transparent;
      }
      .custom-marker .marker-text {
          position: absolute;
          bottom: -15px;
          /* left: 15px; */
          right: -10px;
          /* text-align: center; */
          /* background-color: rgba(255, 255, 255, 0.7);  Optional background for text */
          background: blue;
          color: rgb(255, 255, 255);
          font-size: 15px;
      }      
      /*#endregion*/

/* <!-- CSV file data viewing and editing--> */    
  /*#region*/
  .CSVFileChecking{
    background-color: var(--Gray10);
    width: 35vw;
    position: fixed;
    left: 18vw;
    top: 10vh;
    border: 3px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    z-index: 1050;
    font: 2vh var(--Font);
    font-weight: 150;
    visibility: hidden;
  }
  .CSVFileCheckingControls{
    padding: 0 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px;
    user-select: none;
  }
    .StartCSVFileCheckingButton{
       background-color: transparent;
       background: transparent;
       border: none;
       cursor: pointer;
       visibility: inherit;
       width: 25px;
       height: 25px;
       outline:none;
       position: relative;
       padding: 0 0 0 0;
       margin: 0 0 0 32.5vw;
    }
    .ClearCSVFileCheckingResultsButton{
      background-color: transparent;
      background: transparent;
      border: none;
      cursor: pointer;
      visibility: inherit;
      width: 25px;
      height: 25px;
      outline:none;
      position: relative;
      padding: 0 0 0 0;
      margin: 0 0 0 10px;
    }

    .FieldElementsControls{
      padding: 0 0 0 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      /* justify-content: space-between; */
      height: 13%;
      z-index: 1050;
      width: 100%;
      visibility: inherit;
      background-color:"var(--Gray10)";
    }
      .FieldElementsControlsGroup1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%
      }
      .AvailableCSVFieldElementHeadersDrag{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 25px;
        height: 25px;
        outline:none;
        text-align: right;
        padding: 0 0 0 0;
        margin: 1% 1% 0 0;
        vertical-align: middle;      
      }
      .CSVFieldElementHeaderList{
        top: 0px;
        background-color: var(--Gray10);
        height: 20%;
        /* width: 80%; */
        text-align: center;
      }
      .CloseCSVFileCheckingButton{
       background-color: transparent;
       background: transparent;
       border: none;
       cursor: pointer;
       visibility: inherit;
       width: auto;
       height: 35px;
       outline:none;
       text-align: right;
       padding: 0 0 0 0;
       margin: 0 0 0 0;
       vertical-align: middle;      
      }

      .FieldElementsControlsGroup2{
        display: flex;
        flex-direction: row;
        justify-content: center;        
        width: 100%;
      }      
      .CSVFieldElementHeaderReset{
        background: transparent;
        border: none;
        width: 50px;
        height: 50px;
        outline:none;
        text-align: center;
        cursor: pointer; 
        visibility: inherit;
        z-index: 1500;
      }
      .ContinueCSVFileCheckingButton{
       background-color: transparent;
       background: transparent;
       border: none;
       visibility: inherit;
       width: 50px;
       height: 50px;
       outline:none;
       text-align: center;
      }
      .ContinueCSVFileCheckingButton:disabled{
        opacity: 0.35;
        pointer-events: none;
      }

      .AvailableCSVFieldElementHeaders{
        background-color: var(--Gray0);
        width: 35vw;
        height: 75vh;
        position: fixed;
        left: 1000px;
        top: 10vh;
        border: 2px solid seashell;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        z-index: 50;
        font: 2vh var(--Font);
        font-weight: 150;
        visibility: hidden;
        color: black;
        outline:none;
          /* overflow-y: scroll;     */
      }
    
      .AvailableCSVFieldElementHeadersList{
        background-color: var(--Gray0);    
        border: 2px solid black;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        visibility: inherit;
        color: black;
        outline:none;
        overflow-y: scroll;
        height: 86.5%
      }


    .CSVFileDataViewing{
    background-color: var(--Gray10);
    width: 47vw;
    height: 75vh;
    position: absolute;
    left: 10vw;
    top: 15vh;
    border: 3px solid seashell;
    border-radius: calc( var(--BorderRadiusFraction) * 8px);
    font: 2vh var(--Font);
    font-weight: 150;
    visibility: hidden;
    z-index: 1000;
    }
    .CSVFileDataViewingControls{
    padding: 5px 5px 10px 0px;
    display: flex;
    flex-direction: row;
    justify-content: right;    
    user-select: none;
    }
      .CSVFileDataViewingHeader{
        width: 10vw;
        overflow-x: hidden;
        font-weight: 750;
        margin: 0 10px 0 0;
      }
      .CSVFileRow{
        width: 5vw;
        background: transparent;
        border: none;
        height: 2.5vh;
        padding: 0;
        overflow: none;
        font-size: 2vh;
        font-weight: 750;
        margin: 0 0 0 10px;        
      }
      .CSVFileRow:hover{      
        background: seashell;   /* background: var(--AlertColor); */
        opacity: 1.25
      }
      .CSVFileRow::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }

      .EditCollationDataButton,
      .CloseDisplayCSVImagePreviewButton,
      .SaveChangesToCSVFileDataButton,
      .PreviewImageInCSVFileButton,
      .CloseCSVFileDataViewingButton,
      .HelpCSVFileDataViewingButton,
      .ClearCSVFileDataViewingButton{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        width: 25px;
        height: 25px;
        outline:none;
        padding: 0 0 0 0;
        margin: 0 0 0 13px;
      }
      .SaveChangesToCSVFileDataButton{
        margin: 0 0 0 15%;    
      }
      .PreviewImageInCSVFileButton{
        width: 30px;        
      }

      .DisplayCSVImagePreview{
        position: absolute;
        transform: translate(-20%, 15%);
        height: 60vh;
        width: 30vw;
        border: 3px solid seashell;
        object-fit: contain;
        max-width: 30vw;
        max-height: 60vh;
        font: var(--Font);
        background-color: ivory;
        background-size: contain;    
        z-index: 5000;
        display: none;
      }
      .CloseDisplayCSVImagePreviewButton{
        position: absolute;
        transform: translate(-7vw, 9.5vh);
        margin: 0 0 0 0;
        display: none;
        z-index: 6000;
      }

      .CSVData{
        background-color: var(--Gray10);
        width: 46vw;
        height: 70vh;
        position: relative;
        /* top: 4%; */
        bottom: 0%;
        display: none;
        z-index: 1000;
        font: 2vh var(--Font);
        font-weight: 125;
        overflow-y: scroll;          
      }

  /*#endregion*/    
    
/* <!-- Compose --> */
  /*#region*/
  
      .AvailableCompositionElements{
        background-color: var(--Gray15);
        width: 19vw;
        height: 85vh;
        position: absolute;
        left: 80.25vw;
        top: 25px;
        border: 1px solid var(--Gray60);
        z-index: 1500;
        font: 2vh var(--Font);
        font-weight: 150;
        visibility: hidden;
        box-sizing: border-box;
        color: seashell;
        outline:none;
        opacity: 1.0;
        padding: 0;
        margin: 0;
      }
      .CompositionElementsContnrols{
        display: flex;
        flex-direction: row;
        align-items:flex-start;
        height:  calc(var(--NavigationHeight) * 1.2);
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        gap: 0.5vw;
        align-items: center ;
      }
      .ShowMatchingheadersButton,
      .OpenSpecialCharactersButton{
        background: transparent;
        height: auto;
        border: none;
        outline: none;
        cursor: pointer;        
        margin: 0 ;
        padding: 0;
      }
      .ShowMatchingheadersButton:hover,
      .OpenSpecialCharactersButton:hover{
      transform: scale(1.15);  
      }

      .AvailableCompositionElementsContent{
        background-color: var(--Gray15);
        height: 93%;
        position: relative;
        border: 1px solid transparent;
        /* z-index: 20; */
        font: 2vh var(--Font);
        font-weight: 550;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        box-sizing: border-box;
        color: seashell;
        outline:none;
        display: flex;
        flex-direction: column;
        align-items: left;    
        overflow-y: scroll;
      }
    
      #AvailableCompositionElementsDrag{
        width: 25 px;
        height: 25 px;
        cursor:grabbing;
        margin: 0 0 0 15px;        
      }
    
      .CopyToCompositionBoardButton{
        background-color: var(--Gray10);
        color:rgb(0, 0, 0);
        width: 100%;
        font: var(--Font);
        font-size: calc(var(--NavigationHeight) * 0.5);
        font-weight: 750;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        white-space: nowrap;
        text-overflow: clip;
      }
    
      .CompositionBoard{
        background-color: var(--Gray0);
        width: 80vw;
        height: 85vh;
        position: absolute;
        left: .25vw;
        top: 25px;
        z-index: 2500;
        font: 2vh var(--Font);
        font-weight: 150;
        visibility: hidden;
        box-sizing: border-box;
        color: seashell;
        outline:none;
        border: 1px solid var(--Gray60);        
      }
    
      .CompositionBoardControls{
        display: flex;
        flex-direction: row;
        user-select: none;
        /* height: calc(var(--NavigationHeight) * 1.2); */
        height: var(--PDFComposeControlRibbonHeight);
        width: 99%;
        align-items: center;
        gap: .5vw;
        padding: 0;
        margin: 0;
      }
    
      #CompositionBoardDrag{
        height: inherit;
        cursor:grabbing;
      }
    
      .CompositionBoardTitle{
        color:rgb(0, 0, 0);
        height: inherit;
      }
      
      .PaperCompositionBoardButton{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        outline:none;
      }
    
      .PaperForCompositionBoard{
        background-color: transparent;
        color:rgb(0, 0, 0);
        height: auto;
        width: 7vw;
        font-size: var(--PDFComposeControlRibbonFontSize);
        margin: 0;
      }
          
      .PaperSizeDropDown{
        position: fixed;
        visibility: inherit;
        background-color: transparent;
        width: 15vw; 
        z-index: 0;
        font: 15px var(--Font);
        font-weight: 150;
        color:rgb(0, 0, 0);
        display: flex;
        flex-direction: column;
        align-items: left;
        padding: 0;
        margin: 0;  
      }
    
      .SetPaperSizeButton{
        height: 25px;
        cursor: pointer;
        font: 1.75vh var(--Font);
        font-weight: 450;
        font-size: 15px;
        color: var(--Gray50);
        background-color: var(--Gray0);
        text-align: left;
        margin: 0;
        padding: 0;
      }
    
      .SetPaperSizeButton:hover {
        background-color: var(--Gray15);
        color: var(--Gray0);
      }
    
      .PaperMarginsButton{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        outline:none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
     
      .PaperMarginsDropDown{
        position:fixed;
        background-color: var(--Gray0);
        z-index: 0;
        visibility: inherit;      
        font: var(--Font);
        font-size: var(--PDFComposeControlRibbonFontSize);
        font-weight: 150;
        color:rgb(0, 0, 0);
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 5px;
        grid-row-gap: 0px;
      }
      
      .PaperMargins{
        /* width: 6vw; */
        width: auto;
        background-color: transparent;
        color:rgb(0, 0, 0);
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        font-size: calc(var(--PDFComposeControlRibbonFontSize) * 0.8);
        visibility: visible ;
      }
    
      .FontChooseButton{
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        outline:none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
    
      .FontChooseDropDown{
        position: fixed;
        background-color: transparent;
        width: 10vw; 
        z-index: 10;
        font-size: var(--PDFComposeControlRibbonFontSize);
        font-weight: 250;
        color:rgb(0, 0, 0);
        display: flex;
        flex-direction: column;
        align-items: left;
      }
  
      .ChooseFontFamilyButton{
        font-weight: 100;
        font-size: var(--PDFComposeControlRibbonFontSize);
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        color: var(--Gray50);
        background-color: var(--Gray0);
        text-align: left;
        cursor: pointer;
        height: 2.5vh
      }
    
      .ChooseFontFamilyButton:hover {
        background-color: var(--Gray15);
        color: var(--Gray0);
      }
    
      .FontChoose{
        background-color: transparent;
        color:rgb(0, 0, 0);
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        width: 6vw;
        overflow-wrap: break-word;
        font-size: var(--PDFComposeControlRibbonFontSize);
        font-weight: 500;
        visibility: visible ;
      }
    
      .FontFaceChooseDropDown{
        position: fixed;
        background-color: transparent;
        width: auto;
        height: auto;
        z-index: 0;
        font: var(--Font);
        font-size: var(--PDFComposeControlRibbonFontSize);
        font-weight: 250;
        padding: 0 0 0 0;
        color:rgb(0, 0, 0);
      }
    
      .SetFontButton{
        height: 3 5px;
        width: 100px;
        font: 1.75vh var(--Font);
        font-weight: 450;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        color: var(--Gray50);
        background-color: var(--Gray0);
        cursor: pointer;
      }
    
      .SetFontButton:hover {
        background-color: var(--Gray15);
        color: var(--Gray0);
      }
    
      .FontSizeInput{
        background-color: transparent;
        /* height: calc(var(--NavigationHeight) * 0.8); */
        height: calc(var(--PDFComposeControlRibbonHeight) * 0.6);
        margin: 0 0 0 0;
        padding: 0 0 0 0;
      }
    
      .FontSize{
        background-color: transparent;
        color:rgb(0, 0, 0);
        /* height: calc(var(--NavigationHeight) * 0.6); */
        height: calc(var(--PDFComposeControlRibbonHeight) * 0.45);        
        width: 2vw;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        visibility: inherit ;
      }
    
      .Snap{
        background-color: transparent;
        /* height: calc(var(--NavigationHeight) * 0.8); */
        height: calc(var(--PDFComposeControlRibbonHeight) * 0.6);        
        margin: 0 0 0 0;
        padding: 0 0 0 0;
      }
    
      .SetVertSnap{
        background-color: transparent;
        color:rgb(0, 0, 0);
        width: 4vw;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        visibility: inherit ;
      }
      .SetHorizSnap{
        background-color: transparent;
        color:rgb(0, 0, 0);
        width: 4vw;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        visibility: inherit ;
      }
    
      .SectionSeparator{
        background-color: transparent;
        color:rgb(0, 0, 0);
        width: 4vw;
        height: calc(var(--PDFComposeControlRibbonHeight) * 0.5);
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        visibility: inherit ;        
      }

      .HeaderFooterButton{
        background-color: transparent;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        border: none;
        outline:none;      
        cursor: pointer;
        visibility: inherit;
      }
      .HFimg {
        width: auto;
        /* height: calc(var(--NavigationHeight) * 0.8); */
        height: calc(var(--PDFComposeControlRibbonHeight) * 0.6);        
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        border: none;
      }
  
      .HeaderElement{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        border: 1px dotted var(--Gray10);
        /* position: absolute; */
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        overflow-y: hidden;
        overflow-x: hidden;
      }
  
      .HeaderElementControl{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        height: 20px;
        left: 100%;
        width: 140px;
        display: flex;
        flex-direction: row;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        bottom: 0;
        position: -webkit-sticky; /* Safari */
        position: sticky;
      }
      .FontFaceHeaderContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        top: -2px;
        right: 105px;
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
      }
      .AlignHeaderFooterContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        top: -2px;
        right: 75px;
        background-color: transparent;
        outline:none; 
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: 'pointer';
      }
      .RemoveHeaderLinkContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        right: 40px;
        top: -2px;
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: 'pointer';
      }
      .HeaderLinkContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        top: -2px;
        right: 10px;
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
      }
  
      .FooterElement{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        border: 1px dotted var(--Gray10);
        position: absolute;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        overflow-y: hidden;
        overflow-x: hidden;
      }
      .FooterElementControl{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        height: 20px;
        left: 100%;
        width: 140px;
        display: flex;
        flex-direction: row;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        bottom: 0;
        position: -webkit-sticky; /* Safari */
        position: sticky;
      }
      .FontFaceFooterContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        top: -2px;
        right: 105px;
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
      }
      .AlignFooterFooterContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        top: -2px;
        right: 75px;
        background-color: transparent;
        outline:none; 
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: 'pointer';
      }
      .RemoveFooterLinkContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        right: 40px;
        top: -2px;
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: 'pointer';
      }
      .FooterLinkContentButton{
        width: '25px';
        height: '25px';
        position: absolute;
        top: -2px;
        right: 10px;
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
      }
  
      .PageNumberingButton{
        background-color: transparent;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        border: none;
        outline:none;      
        cursor: pointer;
      }
      .PageNumberChooseDropDown{
        background-color: transparent;
        width: 200px; 
        z-index: 10;
        font: 15px var(--Font);
        font-weight: 150;
        position: fixed;
        color:rgb(0, 0, 0);
        display: flex;
        flex-direction: column;
        align-items: left;
      }
      .PageNumberChooseButton{
        height: 25px;
        left: 10px;
        font-weight: 100;
        font-size: 15px;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        color: var(--Gray50);
        background-color: var(--Gray0);
        text-align: left;
        cursor: pointer;
      }
      .PageNumberChooseButton:hover {
        background-color: var(--Gray15);
        color: var(--Gray0);
      }
      .PageNumberChoose{
        background-color: transparent;
        color:rgb(0, 0, 0);
        width: 4.5vw;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        font-size: var(--PDFComposeControlRibbonFontSize);
        font-weight: 750;
        visibility: visible ;      
      }
  
      .CompositionBasicFunctions{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .3vw;
        margin-left: auto;
      }

      .RetrieveCompositionBoardButton,
      .SaveCompositionBoardButton,
      .ClearCompositionBoardButton,
      .HelpCompositionBoardButton,
      .CloseCompositionBoardButton{        
        background-color: transparent;
        background: transparent;
        border: none;
        cursor: pointer;
        visibility: inherit;
        outline:none;
        padding: 0 0 0 0;
      }
      
      .RetrieveCompositionBoardButton:hover,
      .SaveCompositionBoardButton:hover,
      .ClearCompositionBoardButton:hover,
      .HelpCompositionBoardButton:hover,
      .CloseCompositionBoardButton:hover{
        transform: scale(1.15);
      }

      .CompositionElement{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        width: 35%;
        /* width: auto; */
        height: 50px;
        border: 1px dotted var(--Gray10);
        position: absolute;
        overflow: auto;
        resize: both;
          display: flex;
          flex-direction: column; justify-content: flex-start;
          align-items: left;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        z-index: 30;
      }
      .CompositionElement::-webkit-scrollbar {
        width: 10px;
        color: var(--AlertColor)
      }
      .CompositionElement::-webkit-scrollbar-track {
        border-radius: calc( var(--BorderRadiusFraction) * 5px);
        opacity: .85
      }
      .CompositionElement::-webkit-scrollbar-track-piece{
        background: var(--Gray10);
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);       
      }
      .CompositionElement::-webkit-scrollbar-thumb {
        background: var(--Gray10);
        border-radius: calc( var(--BorderRadiusFraction) * 5px);
        opacity: 1;
        background: var(--AlertColor);
      }
      .CompositionElement::-webkit-scrollbar-thumb:hover {
        background: var(--SliderThumbColor);
      }
  
      .CompositionBoardContent{
        position: fixed;
        background-color: var(--Gray0); 
        color:rgb(0, 0, 0); 
        width: inherit;
        height: calc( 84.95vh - var(--NavigationHeight) * 1.2 );
        border: 1px solid var(--Gray60);
        z-index: 20;
        font: 2vh var(--Font);
        font-weight: 150;
        visibility: inherit;
        box-sizing: border-box;
        outline:none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        overflow-y: scroll;
        overflow-x: hidden;
      }      

      .MarginsContainer{
        visibility: inherit;        
        height: inherit;
      }

      .CompositionElementControl{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        height: 20px;
        /* width: 175px; */
        width: 50%;
        position:absolute;
        /* right: 0%; */
        /* left: -10px; */
        display: flex;
        flex-direction: row;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        border: 2px dotted var(--Gray10);
        position:absolute;
        top: 0;
        left: 0;
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: 250;
      }
      .CompositionElementControlNarrow{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        height: 20px;
        width: 32%;
        left: 100%;
        display: flex;
        flex-direction: row;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        /* overflow-x: visible; */
        position: absolute;
        top: 0;
        left: 0;
        border: 1px dotted var(--Gray10);
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: 250;
      }      
      .CompositionElementContentHeader{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        opacity: 0.5;
        position:absolute;
        left: 0px;
        width: 100%;
        height: 0;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
      .CompositionElementContent{
        background-color: transparent;
        color:rgb(0, 0, 0); 
        opacity: 0.5;
        position:absolute;
        /* top: 0px;   */
        left: 0px;
        width: 100%;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
      .RemoveElementContentButton{
        /* width: 25px; */
        /* height: 25px; */
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        z-index: 50;
        cursor: 'pointer';
      }
      .HeaderElementContentButton{
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        z-index: 50;
        cursor: 'pointer';
      }
      .AlignElementContentButton{
        /* width: 25px; */
        /* height: 25px; */
        background-color: transparent;
        outline:none; 
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        z-index: 50;
        cursor: 'pointer';
      }
      .ColumnsElementContentButton{
        /* width: 25px; */
        /* height: 25px; */
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
        z-index: 50;
     }
      .AddSpaceElementContentButton{
        /* width: 25px; */
        /* height: 25px; */
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
        z-index: 50;
     }
      .FontFaceElementContentButton{
        /* width: 25px; */
        /* height: 25px; */
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
        z-index: 50;
     }
      .FontElementContentButton{
        /* width: 25px; */
        /* height: 25px; */
        background-color: transparent;
        outline:none;
        border: none;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: pointer;
        z-index: 50;
      }
      .CompositionElementDrag{
        background: transparent;
        border: none;
        /* height: 25px; */
        /* width: 25px; */
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        cursor: grabbing;
        z-index: 50;
        outline:none;
      }
      .CompositionElementTitle{
        background: transparent;
        color:rgb(0, 0, 0);         
        border: none;
        height: 25px;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        z-index: 50;
        visibility:visible;
        outline:none;
      }
      .SpecialCharactersForOpenFields{
        background-color: var(--Gray10);
        color:rgb(0, 0, 0); 
        /* border: 3px solid seashell; */
        border: 2px solid black;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        position: absolute;
        width: 35%;
        height: 55%;
        left: 60%;
        top: 35%;
        font: 2vh var(--Font);
        font-weight: 150;        
        display: none;
        overflow-y: scroll;        
        z-index: 1500;
      }
      .SpecialCharactersForOpenFieldsControls{
        position: relative;        
        background-color: var(--Gray0);
        border: none;
        width: 100%;
        z-index: 1500;
        font: 2vh var(--Font);
        font-weight: 150;        
        visibility: inherit;
        position: sticky;
        top: 0%;
      }
      .SpecialCharacters{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1500;        
        display: flex;
        flex-direction: row;     
        flex-wrap: wrap; 
      }
      .SpecialCharacterButton{
        background-color: var(--Gray10);
        color:rgb(0, 0, 0);
        height: 40px;
        width: 40px;
        border: 2px solid black;
        border-radius: calc( var(--BorderRadiusFraction) * 5px);                
        font: 20px var(--Font);
        font-weight: 600;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
      .SpecialCharacterButton:hover{
        transform: scale(1.15);
        cursor: pointer;
      }
      .SpecialCharacterButtonActionSymbol{
        background-color: var(--Gray10);
        color:red;
        height: 40px;
        width: 40px;
        border: 2px solid black;
        border-radius: calc( var(--BorderRadiusFraction) * 5px);                
        font: 35px var(--Font);
        font-weight: 600;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
      .SpecialCharacterButtonActionSymbol:hover{
        transform: scale(1.15);
        cursor: pointer;
      }

      .TempPlace{
        color:rgb(0, 0, 0); 
        display: block;
        width: auto;
        position: absolute;
        padding: 0 0 0 0;
        margin: 0 0 0 0;      
      }

      .MakePDFfromLibrary{
        background-color: var(--Gray0);
        border: 3px solid seashell;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);        
        width: 20%;
        height: 15%;
        position: absolute;
        left: calc(40%);
        top: 25%;
        z-index: 50;
        font: 2vh var(--Font);
        font-weight: 150;        
        display: flex;
        flex-direction: column;
        visibility: hidden;
      }
      .MakePDFfromLibraryControls{
        background-color: var(--Gray0);
        border: none;
        /* border: 3px solid seashell; */
        /* border-radius: calc( var(--BorderRadiusFraction) * 8px);         */
        width: 100%;
        height: 15%;
        left: calc(50%);
        top: 35%;
        z-index: 50;
        font: 2vh var(--Font);
        font-weight: 150;        
        display: flex;
        flex-direction: row;
        visibility: inherit;
      }

      .PopulateElementsWithContent{
        background-color: transparent;
        background: transparent;
        border: none;
        visibility: inherit;
        width: 25px;
        height: 25px;
        outline:none;
        position: relative;
        padding: 0 2% 0 5%;
        margin: 0 0 0 0;
      }
      .ElementNumberForContent{
        background-color: transparent;
        color:rgb(0, 0, 0);
        position: relative;
        height: 20px;
        width: 20%;
        padding: 0 0 0 0;
        margin: 0 5% 0 0;
        visibility: inherit ;
      }
      .QualityForContent{
        background-color: transparent;
        color:rgb(0, 0, 0);
        position: relative;
        height: 20px;
        width: 15% ;
        padding: 0 0 0 0%;
        margin: 0 0 0 0;
        visibility: inherit ;
      }
      .MakePDF{
        background-color: transparent;
        border: none;
        position: relative;
        height: 30px;
        width: 25% ;
        left: 37.5%;
        padding: 0 0 0 0;
        margin: 5% 0 0 0;
        visibility: inherit ;
        cursor: pointer;
      }
      .MakePDFMultipleButton{
        background-color: transparent;
        border: none;
        position: relative;
        height: 40px;
        width: 76px ;
        left: 30%;
        padding: 0 0 0 0;
        margin: 5% 0 0 0;
        visibility: inherit ;
        cursor: pointer;        
      }
      .MakePDFMultiple{
        background-color: transparent;
        border: 2px solid black;
        border-radius: calc( var(--BorderRadiusFraction) * 8px);
        position: relative;
        height: 40px;
        width: 76px ;
        left: 30%;
        padding: 5px 5px 5px 5px;
        margin: 5% 0 0 0;
        visibility: inherit ;
        cursor: pointer;
      }
      .MakePDFMultiple:hover,
      .MakePDF:hover{
        transform: scale(1.15);
      }
      .MakePDFProgress{
        background-color:transparent;        
        height: auto;
        width: 25%;
        position: relative;
        left: 37.5%;
        visibility: inherit;
        display: none;
        margin: 5% 0 0 0;        
      }

      .PDFlayoutChoice{
        cursor: pointer; 
        margin: .2vh 0 .2vh .5vw; 
        width: fit-content;
        display: inline;
        border: 2px solid var(--Gray15);
        padding: '0';        
      }
      .PDFlayoutChoice:hover{
        background-color: var(--Gray10);
        font-weight: 1500;
        /* scale: 1.1; */
      }

     /* <!-- Composer rulers --> */
    
    .rulerH {
     position: absolute;
     height: 10px;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     left: 0px;
     top: 0px;
     position: -webkit-sticky; /* Safari */
     position: sticky;
    }
    .rulerH .unitH,
    .rulerH .tenthsH {
     position: absolute;
     border-left: 1px solid #555;
     height: 10px;
     width: 10%;
    }
    .rulerH .tenthsH {
     height: 5px;
    }
    
    .rulerV {
     position: fixed;
     width: 10px;
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     left: 0px;
     top: 0px;
     /* top: calc(var(--NavigationHeight) * 1.2); */
     }
    .rulerV .unitV,
    .rulerV .tenthsV {
     position: absolute;
     border-top: 1px solid #555;
     height: 10%;
     width: 10px;
    }
    .rulerV .tenthsV {
     width: 5px;
    }
      /*#endregion*/
  
/* <!-- Dialogues Webpage access --> */      
  /*#region*/      
    .dialog {
        position:absolute;
        /* top: 5vh; */
        /* left: 10vw; */
        width: 40vwpx;
        height: 7vh;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0,0,0,.2);
        border-radius: 3px;
        z-index: 5000;
        font-weight: bold;
        fill: var(--AlertColor);
        font-size: x-large; 
        font-family: var(--Font);        
    }
    dialog::backdrop {
      backdrop-filter: blur(2px);
    }
    .dialogbutton{
      height: 5vh;
      font-weight: bold;
      fill: var(--AlertColor);
      font-size: large; 
      font-family: var(--Font);              
    }
    .DownLoadProgress{
      background-color: transparent;
      box-shadow: 0 0 20px rgba(0,0,0,.2);
      border-radius: 3px;
      color: white;
      width: 9vw;
      height: 16vh;
      position: fixed;
      right: 45.5%;
      top: 44.5%;
      display: none;
      z-index: 10000;
      font-weight: bold;
      fill: white;
      font-size: x-large; 
      font-family: var(--Font);      
      padding: 50 50 50 50
     }
     .HoldDownloadProgress{
      position:absolute;
      top: 1.5vh;
      left: 1.5vw;
      color: white;
     }

     .BookPageantLayoutFiles,
     .BookPageantCatalogue{
      background-color: transparent;
      width: 30vw;
      height: 30vh;
      position: fixed;
      left: 2vw;
      top: 30vh;
      display: none;
      z-index: 100;
      color:#fff;
      font-weight: bold;
      font-size: x-large; 
      font-family: var(--Font);
      text-align: center;
     }

     .BookPageantLayoutFiles{
      left: 35vw;
      background-color: seashell;
      color: black;
     }

    .BookPageantLayoutFilesContent,
    .BookPageantCatalogueContent{
      width: 100%;
      height: 83%;
      font-weight: 500;
      font-size: large; 
      font-family: var(--Font);
      text-align: left;
      overflow-y: scroll;
      z-index: 125;
    }

    .BookPageantLayoutFilesContent{
      margin: 1vh 0 0 0;
    }

    .BookPageantCatalogueContent::-webkit-scrollbar {
      width: 0.5vw;
      color: transparent;
    }
    .BookPageantCatalogueContent::-webkit-scrollbar-track {
      color: transparent;
      border-radius: calc( var(--BorderRadiusFraction) * 5px);
    }
    .BookPageantCatalogueContent::-webkit-scrollbar-track-piece{
      background: transparent;
    }
    .BookPageantCatalogueContent::-webkit-scrollbar-thumb {
      background: var(--Gray0);
      border-radius: calc( var(--BorderRadiusFraction) * 5px);
      opacity: 1;
      background: var(--Gray0);
    }
    .BookPageantCatalogueContent::-webkit-scrollbar-thumb:hover {
      background: var(--Gray0);
      pointer-events: pointer;
    }

    .BookPageantLayoutImage,
    .CatalogueEntryInformation{
      position: absolute;
      top: 35%;
      left: 35%;
      width: 30vw;
      height: 15vh;
      background-color: transparent;
      font-weight: 500;
      font-size: large; 
      font-family: var(--Font);      
      color: white;
      display: none;
      z-index: 5001 ;
    }
    .BookPageantLayoutImage{
      width: auto;
      left: 5vw;
      top: 50vh;
      height: 40vh;
      background-color: gray;
    }

    .CloseBookPageantLayoutFilesButton,
     .CloseBookPageantCatalogueButton{
      position:absolute;
      top: 0;
      right: 0;
      height: 3vh;
      font: calc(50vw/50) var(--Font);
      font-weight: 600;
      border: none;
      padding: 0 0 0 10;
      color: var(--Gray60);
      background-color: seashell;
      text-align: left;
      outline: none;
      cursor: pointer;
    }
    .CloseBookPageantLayoutFilesButton:hover,
    .CloseBookPageantCatalogueButton:hover {
      background-color: var(--Gray20);
      color: var(--Gray0);
    }     
    .CancelDownloadButton{
      position:absolute;
      top: 1vh;
      right: 0.75vw;
      height: 3vh;
      font: calc(50vw/50) var(--Font);
      font-weight: 600;
      border: none;
      padding: 0 0 0 0;
      color: var(--Gray60);
      background-color: transparent;
      text-align: left;
      outline: none;
      cursor: pointer;      
    }
    .DownloadTimeRemaining{
      position:absolute;
      bottom: 0.25vh;
      left: 2vw;
      /* right: 35%; */
      height: 4vh;
      font: calc(50vw/50) var(--Font);
      /* font-weight: 600; */
      border: none;
      padding: 0 0 0 0;
      color: var(--Gray60);
      background-color: transparent;
      color:white;
      text-align: center;
      outline: none;
      pointer-events: none;
      font-weight: bold;
      /* fill: var(--AlertColor); */
      font-size: x-large; 
      font-family: var(--Font);            
    }

    .InstructiionalVideos{
      background-color: transparent;
      width: 30vw;
      height: 30vh;
      position: fixed;
      left: 2%;
      top: 75%;
      display: none;
      z-index: 100;
      color:#fff;
      font-weight: bold;
      font-size: x-large; 
      font-family: var(--Font);
      text-align: center;
    }
    .InstructiionalVideosList{
      font-weight: 500;
      font-size: medium; 
      font-family: var(--Font);
      text-align: left;
      overflow-y: scroll;
      z-index: 125;
    }
    .InstructiionalVideosList::-webkit-scrollbar {
      width: 0.5vw;
      color: transparent;
    }
    .InstructiionalVideosList::-webkit-scrollbar-track {
      color: transparent;
      border-radius: calc( var(--BorderRadiusFraction) * 5px);
    }
    .InstructiionalVideosList::-webkit-scrollbar-track-piece{
      background: transparent;
    }
    .InstructiionalVideosList::-webkit-scrollbar-thumb {
      background: var(--Gray0);
      border-radius: calc( var(--BorderRadiusFraction) * 5px);
      opacity: 1;
      background: var(--Gray0);
    }
    .InstructiionalVideosList::-webkit-scrollbar-thumb:hover {
      background: var(--Gray0);
      pointer-events: pointer;
    }

    .CommentForm{
      position: fixed;
      top: 15%;
      right: 37.5vw;
      width: 25vw;
      /* height: 40vh; */
      height: auto;
      background-color: var(--Gray10);
      border: 3px solid seashell;
      border-radius: calc( var(--BorderRadiusFraction) * 8px);      
      font-weight: 500;
      font-size: 1.5vh;
      font-family: var(--Font);      
      color: var(--Gray60);
      display: none;
      z-index: 200;
      padding: 0 0 0 0;
      margin: 0 0 0 0;      
      /* outline: none; */
    }
    .CommentDirections{
      text-align: center;
      font-weight: 500;
      font-size: 2.0vh;
      
    }

    .CommentFormName,
    .CommentFormEmail{
      width: 20vw;
      height: 2vh;
      /* padding: 0 0 0 0.5vw; */
    }

    .CommentSendButton{
      display: inline-block;
      background-color: transparent;
      border: 3px solid var(--AlertColor);
      border-radius: calc( var(--BorderRadiusFraction) * 8px);      
      width: 5vw;
      height: 4vh;      
      font-weight: 500;
      font-size: 2.5vh;
      font-family: var(--Font);      
      color: var(--AlertColor);
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      cursor: pointer;
      text-align: center;
      -webkit-appearance: none;
      -moz-appearance: none;      
      appearance: none;      
    }
    .CommentSendButton:hover{
      scale: 1.1
    }
    .CloseCommentWindow{
      background: transparent;
      border: none;
      outline:none;
      text-align: center;
      height: 4vh;      
    }
    .CommentControls{
      display: flex;
      flex-direction: row; justify-content: flex-start;
      align-items:center; 
      margin: 0 0 2vh 0.5vw;
    }
    .CommentFormMessage{
      resize: vertical;
      width: 23.5vw;
      height: 27vh;
    }

  /*#endregion*/
    
/* <!-- Help videos' access --> */
  /*#region*/
    .VideoPlayerWrapper{
      position: absolute;
      top: 0vh;
      left: 1.25vw;
      width: 97.5vw;
      height: 100vh;
      display: none;
      z-index: 100;
      padding: 0, 0, 0, 0;
      margin: 0, 0, 0, 0;
      /* background-color: seashell;
      border: 2px solid black;
      border-radius: calc( var(--BorderRadiusFraction) * 2px);             */
    }
    .VideoPlayer{
      display: inherit;
      position: relative;
      left: 4vw;
      width: auto;
      height: 99vh;
      padding: 0, 0, 0, 0;
      margin: 0, 0, 0, 0;
    }
       /*#endregion*/